/* --- Theme tokens --------------------------------------------------- * Generated from the palette that was hardcoded through this file. * --t-xxxxxx is the colour in use; --d-xxxxxx is its dark counterpart, * derived by holding the hue and inverting the lightness. Shadows stay * dark rather than inverting into a glow. Dark mode simply re-points * every --t- at its --d-, so the dark palette is edited in ONE place: * the --d- values below, and the tuning block that follows them. * Theme follows the OS unless data-theme is set on . * -------------------------------------------------------------------- */ :root { color-scheme: light; --s-633524-12: #63352412; /* dark: */ --d-633524-12: #0b060418; --s-6d302b-16: #6d302b16; /* dark: */ --d-6d302b-16: #0b05041d; --s-6d302b-1a: #6d302b1a; /* dark: */ --d-6d302b-1a: #0b050423; --s-6d302b-b0: #6d302bb0; /* dark: */ --d-6d302b-b0: #0b0504ed; --s-6d302b-cc: #6d302bcc; /* dark: */ --d-6d302b-cc: #0b0504ff; --s-744225-25: #74422525; /* dark: */ --d-744225-25: #0b070431; --s-754733-15: #75473315; /* dark: */ --d-754733-15: #0b06051c; --s-d5bda2: #d5bda2; /* dark: */ --d-d5bda2: #0b0805; --s-d5bda4-4d: #d5bda44d; /* dark: */ --d-d5bda4-4d: #0a080567; --s-eac8b1-99: #eac8b199; /* dark: */ --d-eac8b1-99: #0b0704ce; --s-ffffff-1f: #ffffff1f; /* dark: */ --d-ffffff-1f: #08080829; --t-3b5b37: #3b5b37; /* dark: */ --d-3b5b37: #cbdbc9; --t-516d3b: #516d3b; /* dark: */ --d-516d3b: #cdd8c4; --t-52654a-1a: #52654a1a; /* dark: */ --d-52654a-1a: #c9d4c51a; --t-61281f: #61281f; /* dark: */ --d-61281f: #ddcfcd; --t-647c4a: #647c4a; /* dark: */ --d-647c4a: #809f5f; --t-678156: #678156; /* dark: */ --d-678156: #83a070; --t-6d302b: #6d302b; /* dark: */ --d-6d302b: #dac9c8; --t-6d302b-0f: #6d302b0f; /* dark: */ --d-6d302b-0f: #dac9c80f; --t-6d302b-12: #6d302b12; /* dark: */ --d-6d302b-12: #dac9c812; --t-6d302b-16: #6d302b16; /* dark: */ --d-6d302b-16: #dac9c816; --t-6d302b-20: #6d302b20; /* dark: */ --d-6d302b-20: #dac9c820; --t-6d302b-25: #6d302b25; /* dark: */ --d-6d302b-25: #dac9c825; --t-6d302b-30: #6d302b30; /* dark: */ --d-6d302b-30: #dac9c830; --t-6d302b-33: #6d302b33; /* dark: */ --d-6d302b-33: #dac9c833; --t-6d302b-35: #6d302b35; /* dark: */ --d-6d302b-35: #dac9c835; --t-6d302b-40: #6d302b40; /* dark: */ --d-6d302b-40: #dac9c840; --t-738165: #738165; /* dark: */ --d-738165: #909e83; --t-7d3a33: #7d3a33; /* dark: */ --d-7d3a33: #d7c4c2; --t-80705a: #80705a; /* dark: */ --d-80705a: #9e8d75; --t-85645a: #7a564b; /* dark: */ --d-85645a: #a38176; --t-86623d: #86623d; /* dark: */ --d-86623d: #ac7e4e; --t-8b5144: #8b5144; /* dark: */ --d-8b5144: #ae6959; --t-8c382a: #8c382a; /* dark: */ --d-8c382a: #b54936; --t-8e5c45: #8e5c45; /* dark: */ --d-8e5c45: #b0765c; --t-927265: #6f5347; /* dark: */ --d-927265: #ac9287; --t-9c7858-65: #9c785865; /* dark: */ --d-9c7858-65: #b5967b65; --t-a84734: #a84734; /* dark: */ --d-a84734: #c8624e; --t-b07a5f: #8a5a3e; /* dark: */ --d-b07a5f: #c59d89; --t-b39875: #b39875; /* dark: */ --d-b39875: #cab79f; --t-b57744-30: #b5774430; /* dark: */ --d-b57744-30: #c8966d30; --t-c07542: #c07542; /* dark: */ --d-c07542: #cf9770; --t-c46e4d: #c46e4d; /* dark: */ --d-c46e4d: #d4957c; --t-cdd5ba: #cdd5ba; /* dark: */ --d-cdd5ba: #323728; --t-ceb69b: #ceb69b; /* dark: */ --d-ceb69b: #d3bea6; --t-cfdbd9: #cfdbd9; /* dark: */ --d-cfdbd9: #222d2b; --t-d0ab9b: #d0ab9b; /* dark: */ --d-d0ab9b: #d5b3a5; --t-dec0b3: #dec0b3; /* dark: */ --d-dec0b3: #362c27; --t-e2e5d8: #e2e5d8; /* dark: */ --d-e2e5d8: #24271c; --t-e3e8d3: #e3e8d3; /* dark: */ --d-e3e8d3: #25281d; --t-e4b7a1: #e4b7a1; /* dark: */ --d-e4b7a1: #3a302a; --t-e6d9bd: #e6d9bd; /* dark: */ --d-e6d9bd: #302c23; --t-e8ddc6: #e8ddc6; /* dark: */ --d-e8ddc6: #2c2820; --t-e9c7b1: #e9c7b1; /* dark: */ --d-e9c7b1: #332b25; --t-e9decb: #e9decb; /* dark: */ --d-e9decb: #2a261e; --t-eac8b1: #eac8b1; /* dark: */ --d-eac8b1: #332a25; --t-ead8c4: #ead8c4; /* dark: */ --d-ead8c4: #2c2620; --t-eadbc8: #eadbc8; /* dark: */ --d-eadbc8: #2b261f; --t-ebba99: #ebba99; /* dark: */ --d-ebba99: #3b312b; --t-ecceac: #ecceac; /* dark: */ --d-ecceac: #342d25; --t-ecdfd0: #ecdfd0; /* dark: */ --d-ecdfd0: #27221c; --t-ece6d7: #ece6d7; /* dark: */ --d-ece6d7: #25221b; --t-edd5be: #edd5be; /* dark: */ --d-edd5be: #2d2721; --t-eec99e: #eec99e; /* dark: */ --d-eec99e: #383129; --t-eee8d9: #eee8d9; /* dark: */ --d-eee8d9: #23211a; --t-efe2d1: #efe2d1; /* dark: */ --d-efe2d1: #26211b; --t-f5e6d5-40: #f5e6d540; /* dark: */ --d-f5e6d5-40: #221e1940; --t-f5eee4: #f5eee4; /* dark: */ --d-f5eee4: #1d1a15; --t-f5eee4-e8: #f5eee4e8; /* dark: */ --d-f5eee4-e8: #1d1a15e8; --t-f6dcc6: #f6dcc6; /* dark: */ --d-f6dcc6: #27211c; --t-f6ebdf: #f6ebdf; /* dark: */ --d-f6ebdf: #1f1b16; --t-f7e3d3: #f7e3d3; /* dark: */ --d-f7e3d3: #221d19; --t-f8f0df: #f8f0df; /* dark: */ --d-f8f0df: #1e1b16; --t-faeede: #faeede; /* dark: */ --d-faeede: #1d1a15; --t-fdf9f3: #fdf9f3; /* dark: */ --d-fdf9f3: #15130f; --t-fff6ed: #fff6ed; /* dark: */ --d-fff6ed: #171310; --t-fff7eb: #fff7eb; /* dark: */ --d-fff7eb: #171511; --t-fff7ec: #fff7ec; /* dark: */ --d-fff7ec: #171411; --t-fff9eb: #fff9eb; /* dark: */ --d-fff9eb: #171511; --t-fffaf0: #fffaf0; /* dark: */ --d-fffaf0: #151410; --t-fffcf4: #fffcf4; /* dark: */ --d-fffcf4: #14130f; --t-fffdfa: #fffdfa; /* dark: */ --d-fffdfa: #12100d; } :root[data-theme="dark"] { color-scheme: dark; --s-633524-12: var(--d-633524-12); --s-6d302b-16: var(--d-6d302b-16); --s-6d302b-1a: var(--d-6d302b-1a); --s-6d302b-b0: var(--d-6d302b-b0); --s-6d302b-cc: var(--d-6d302b-cc); --s-744225-25: var(--d-744225-25); --s-754733-15: var(--d-754733-15); --s-d5bda2: var(--d-d5bda2); --s-d5bda4-4d: var(--d-d5bda4-4d); --s-eac8b1-99: var(--d-eac8b1-99); --s-ffffff-1f: var(--d-ffffff-1f); --t-3b5b37: var(--d-3b5b37); --t-516d3b: var(--d-516d3b); --t-52654a-1a: var(--d-52654a-1a); --t-61281f: var(--d-61281f); --t-647c4a: var(--d-647c4a); --t-678156: var(--d-678156); --t-6d302b: var(--d-6d302b); --t-6d302b-0f: var(--d-6d302b-0f); --t-6d302b-12: var(--d-6d302b-12); --t-6d302b-16: var(--d-6d302b-16); --t-6d302b-20: var(--d-6d302b-20); --t-6d302b-25: var(--d-6d302b-25); --t-6d302b-30: var(--d-6d302b-30); --t-6d302b-33: var(--d-6d302b-33); --t-6d302b-35: var(--d-6d302b-35); --t-6d302b-40: var(--d-6d302b-40); --t-738165: var(--d-738165); --t-7d3a33: var(--d-7d3a33); --t-80705a: var(--d-80705a); --t-85645a: var(--d-85645a); --t-86623d: var(--d-86623d); --t-8b5144: var(--d-8b5144); --t-8c382a: var(--d-8c382a); --t-8e5c45: var(--d-8e5c45); --t-927265: var(--d-927265); --t-9c7858-65: var(--d-9c7858-65); --t-a84734: var(--d-a84734); --t-b07a5f: var(--d-b07a5f); --t-b39875: var(--d-b39875); --t-b57744-30: var(--d-b57744-30); --t-c07542: var(--d-c07542); --t-c46e4d: var(--d-c46e4d); --t-cdd5ba: var(--d-cdd5ba); --t-ceb69b: var(--d-ceb69b); --t-cfdbd9: var(--d-cfdbd9); --t-d0ab9b: var(--d-d0ab9b); --t-dec0b3: var(--d-dec0b3); --t-e2e5d8: var(--d-e2e5d8); --t-e3e8d3: var(--d-e3e8d3); --t-e4b7a1: var(--d-e4b7a1); --t-e6d9bd: var(--d-e6d9bd); --t-e8ddc6: var(--d-e8ddc6); --t-e9c7b1: var(--d-e9c7b1); --t-e9decb: var(--d-e9decb); --t-eac8b1: var(--d-eac8b1); --t-ead8c4: var(--d-ead8c4); --t-eadbc8: var(--d-eadbc8); --t-ebba99: var(--d-ebba99); --t-ecceac: var(--d-ecceac); --t-ecdfd0: var(--d-ecdfd0); --t-ece6d7: var(--d-ece6d7); --t-edd5be: var(--d-edd5be); --t-eec99e: var(--d-eec99e); --t-eee8d9: var(--d-eee8d9); --t-efe2d1: var(--d-efe2d1); --t-f5e6d5-40: var(--d-f5e6d5-40); --t-f5eee4: var(--d-f5eee4); --t-f5eee4-e8: var(--d-f5eee4-e8); --t-f6dcc6: var(--d-f6dcc6); --t-f6ebdf: var(--d-f6ebdf); --t-f7e3d3: var(--d-f7e3d3); --t-f8f0df: var(--d-f8f0df); --t-faeede: var(--d-faeede); --t-fdf9f3: var(--d-fdf9f3); --t-fff6ed: var(--d-fff6ed); --t-fff7eb: var(--d-fff7eb); --t-fff7ec: var(--d-fff7ec); --t-fff9eb: var(--d-fff9eb); --t-fffaf0: var(--d-fffaf0); --t-fffcf4: var(--d-fffcf4); --t-fffdfa: var(--d-fffdfa); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --s-633524-12: var(--d-633524-12); --s-6d302b-16: var(--d-6d302b-16); --s-6d302b-1a: var(--d-6d302b-1a); --s-6d302b-b0: var(--d-6d302b-b0); --s-6d302b-cc: var(--d-6d302b-cc); --s-744225-25: var(--d-744225-25); --s-754733-15: var(--d-754733-15); --s-d5bda2: var(--d-d5bda2); --s-d5bda4-4d: var(--d-d5bda4-4d); --s-eac8b1-99: var(--d-eac8b1-99); --s-ffffff-1f: var(--d-ffffff-1f); --t-3b5b37: var(--d-3b5b37); --t-516d3b: var(--d-516d3b); --t-52654a-1a: var(--d-52654a-1a); --t-61281f: var(--d-61281f); --t-647c4a: var(--d-647c4a); --t-678156: var(--d-678156); --t-6d302b: var(--d-6d302b); --t-6d302b-0f: var(--d-6d302b-0f); --t-6d302b-12: var(--d-6d302b-12); --t-6d302b-16: var(--d-6d302b-16); --t-6d302b-20: var(--d-6d302b-20); --t-6d302b-25: var(--d-6d302b-25); --t-6d302b-30: var(--d-6d302b-30); --t-6d302b-33: var(--d-6d302b-33); --t-6d302b-35: var(--d-6d302b-35); --t-6d302b-40: var(--d-6d302b-40); --t-738165: var(--d-738165); --t-7d3a33: var(--d-7d3a33); --t-80705a: var(--d-80705a); --t-85645a: var(--d-85645a); --t-86623d: var(--d-86623d); --t-8b5144: var(--d-8b5144); --t-8c382a: var(--d-8c382a); --t-8e5c45: var(--d-8e5c45); --t-927265: var(--d-927265); --t-9c7858-65: var(--d-9c7858-65); --t-a84734: var(--d-a84734); --t-b07a5f: var(--d-b07a5f); --t-b39875: var(--d-b39875); --t-b57744-30: var(--d-b57744-30); --t-c07542: var(--d-c07542); --t-c46e4d: var(--d-c46e4d); --t-cdd5ba: var(--d-cdd5ba); --t-ceb69b: var(--d-ceb69b); --t-cfdbd9: var(--d-cfdbd9); --t-d0ab9b: var(--d-d0ab9b); --t-dec0b3: var(--d-dec0b3); --t-e2e5d8: var(--d-e2e5d8); --t-e3e8d3: var(--d-e3e8d3); --t-e4b7a1: var(--d-e4b7a1); --t-e6d9bd: var(--d-e6d9bd); --t-e8ddc6: var(--d-e8ddc6); --t-e9c7b1: var(--d-e9c7b1); --t-e9decb: var(--d-e9decb); --t-eac8b1: var(--d-eac8b1); --t-ead8c4: var(--d-ead8c4); --t-eadbc8: var(--d-eadbc8); --t-ebba99: var(--d-ebba99); --t-ecceac: var(--d-ecceac); --t-ecdfd0: var(--d-ecdfd0); --t-ece6d7: var(--d-ece6d7); --t-edd5be: var(--d-edd5be); --t-eec99e: var(--d-eec99e); --t-eee8d9: var(--d-eee8d9); --t-efe2d1: var(--d-efe2d1); --t-f5e6d5-40: var(--d-f5e6d5-40); --t-f5eee4: var(--d-f5eee4); --t-f5eee4-e8: var(--d-f5eee4-e8); --t-f6dcc6: var(--d-f6dcc6); --t-f6ebdf: var(--d-f6ebdf); --t-f7e3d3: var(--d-f7e3d3); --t-f8f0df: var(--d-f8f0df); --t-faeede: var(--d-faeede); --t-fdf9f3: var(--d-fdf9f3); --t-fff6ed: var(--d-fff6ed); --t-fff7eb: var(--d-fff7eb); --t-fff7ec: var(--d-fff7ec); --t-fff9eb: var(--d-fff9eb); --t-fffaf0: var(--d-fffaf0); --t-fffcf4: var(--d-fffcf4); --t-fffdfa: var(--d-fffdfa); } } :root { --paper: var(--t-f5eee4); --ink: var(--t-6d302b); --rust: var(--t-a84734); --muted: var(--t-85645a); --line: var(--t-6d302b-25); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 25px; } main { overflow: clip; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.6; overflow-x: clip; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; color: inherit; } h1, h2, h3, p { margin: 0; } h1, h2, h3 { font-weight: 400; line-height: 1.05; letter-spacing: -0.055em; } em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; } button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--t-a84734); outline-offset: 5px; } [hidden] { display: none !important; } .wrap { width: min(1280px, calc(100% - 112px)); margin: auto; } .eyebrow { font-size: 9px; letter-spacing: 0.13em; font-weight: 500; display: flex; align-items: center; gap: 8px; } .eyebrow i { width: 6px; height: 6px; background: var(--rust); border-radius: 50%; } .cc-header { height: 105px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 20; } .cc-brand { display: flex; align-items: center; gap: 10px; } .cc-brand svg { width: 43px; height: 43px; } .cc-brand > span { font-size: 28px; font-weight: 500; letter-spacing: -1.4px; line-height: 0.9; } .cc-brand > span > span { display: block; font-size: 14px; letter-spacing: 4px; margin-top: 4px; } .cc-header nav { display: flex; align-items: center; gap: 34px; font-size: 11px; } .cc-header nav > a:hover { opacity: 0.7; } .button { display: inline-flex; align-items: center; gap: 28px; background: var(--rust); color: var(--t-fff7ec); padding: 17px 24px; border-radius: 50px; font-size: 12px; transition: transform 0.2s, background 0.2s; } .button:hover { transform: translateY(-3px); background: var(--t-8c382a); } .button span { font-size: 20px; } .button.small { padding: 12px 20px; font-size: 11px; } .text-link { font-size: 11px; border-bottom: 1px solid; padding-bottom: 5px; display: inline-block; } .menu-toggle { display: none; } .skip { position: absolute; top: -80px; left: 20px; padding: 10px; background: white; z-index: 100; } .skip:focus { top: 10px; } .cc-hero { position: relative; min-height: 745px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; padding-block: 50px 70px; } .cc-hero-copy { z-index: 2; } .cc-hero h1 { font-size: clamp(59px, 6.25vw, 95px); line-height: 1.015; margin: 29px 0 27px; letter-spacing: -0.065em; } .cc-hero h1 em { color: var(--rust); } .lede { font-size: 14px; color: var(--muted); max-width: 395px; line-height: 1.9; } .hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 27px; } .availability { font-size: 8px; letter-spacing: 0.09em; margin-top: 21px; color: var(--muted); } .availability span { margin: 0 9px; } .cc-clock-scene { height: 570px; position: relative; display: grid; place-items: center; } .cc-orbit { border: 1px solid var(--t-b57744-30); border-radius: 50%; position: absolute; width: 105%; aspect-ratio: 1; transform: rotate(-35deg) scaleY(0.8); } .orbit-two { transform: rotate(25deg) scaleY(0.85); width: 125%; border-style: dashed; opacity: 0.5; animation: orbit 90s linear infinite; } .clock-disc { width: 405px; height: 405px; background: linear-gradient(145deg, var(--t-fff9eb), var(--t-e6d9bd)); border: 14px solid var(--t-f8f0df); border-radius: 50%; box-shadow: 18px 35px 45px var(--s-744225-25), inset 0 0 2px 1px var(--s-d5bda2); position: relative; transform: rotate(-8deg); animation: float 12s ease-in-out infinite; } .clock-ticks { position: absolute; inset: 13px; border-radius: 50%; background: repeating-conic-gradient( from 0deg, var(--t-b39875) 0deg 1deg, transparent 1deg 6deg ); mask-image: radial-gradient(transparent 65%, black 66%); opacity: 0.5; } .clock-number { position: absolute; font-family: Georgia, serif; font-size: 38px; font-style: italic; line-height: 1; } .n12 { left: 43%; top: 33px; } .n3 { right: 34px; top: 45%; } .n6 { bottom: 32px; left: 47%; } .n9 { left: 34px; top: 45%; } .clock-word { position: absolute; top: 28%; left: 0; width: 100%; text-align: center; font-size: 10px; letter-spacing: 0.07em; } .clock-sub { position: absolute; bottom: 28%; left: 0; width: 100%; text-align: center; font-size: 6px; letter-spacing: 0.17em; } .clock-hand { position: absolute; left: calc(50% - 3px); bottom: 50%; width: 6px; border-radius: 8px; transform-origin: center bottom; background: var(--ink); } .clock-hand.hour { height: 86px; transform: rotate(300deg); } .clock-hand.minute { height: 124px; width: 4px; left: calc(50% - 2px); transform: rotate(40deg); } .clock-hand.second { height: 143px; width: 1px; left: 50%; background: var(--t-c07542); } .clock-pin { position: absolute; width: 14px; height: 14px; top: calc(50% - 7px); left: calc(50% - 7px); border-radius: 50%; background: var(--rust); border: 3px solid var(--t-eec99e); } .floating-slip { position: absolute; background: var(--t-fffcf4); border: 1px solid var(--t-efe2d1); box-shadow: 0 15px 30px var(--s-754733-15); border-radius: 7px; } .slip-in { left: -10px; top: 75px; display: flex; gap: 14px; padding: 18px 22px; align-items: center; transform: rotate(-8deg); animation: slip-float 9s ease-in-out infinite; } .slip-icon { height: 33px; width: 33px; background: var(--t-e3e8d3); color: var(--t-647c4a); border-radius: 50%; display: grid; place-items: center; } .slip-in b { display: block; font-size: 13px; font-weight: 500; } .slip-in small { font-size: 10px; color: var(--muted); } .slip-in i { font-style: normal; margin-left: 16px; } .slip-out { right: -10px; bottom: 38px; padding: 23px 28px; transform: rotate(7deg); background: var(--t-ecceac); animation: slip-float 12s ease-in-out infinite reverse; } .slip-out > span { display: block; font-size: 7px; letter-spacing: 0.1em; } .slip-out b { display: block; font-size: 23px; letter-spacing: -0.7px; line-height: 1.2; font-weight: 400; margin-top: 12px; } .slip-out svg { width: 90px; height: 35px; fill: none; stroke: var(--rust); stroke-width: 1.5; margin-top: 13px; } .scene-caption { position: absolute; bottom: 1px; left: 10%; font-size: 7px; letter-spacing: 0.1em; color: var(--muted); } .cc-promise-strip { background: var(--t-e9decb); border-block: 1px solid var(--t-6d302b-0f); display: flex; justify-content: space-evenly; gap: 25px; padding: 22px 40px; font-size: 10px; } .cc-promise-strip > span:first-child { font-family: Georgia, serif; font-style: italic; font-size: 15px; } .cc-intro { padding-block: 100px; } .intro-heading { display: grid; grid-template-columns: 1.3fr 1fr; gap: 100px; align-items: end; margin: 25px 0 50px; } h2 { font-size: clamp(42px, 4.65vw, 66px); } .intro-heading > p { font-size: 14px; color: var(--muted); line-height: 1.9; max-width: 370px; } .feature-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .feature-art { height: 265px; overflow: hidden; position: relative; border-radius: 100px 100px 8px 8px; margin-bottom: 26px; padding: 35px 25px; background: var(--t-ead8c4); } .feature-art > span:first-child { display: block; font-size: 7px; letter-spacing: 0.1em; } .arrival-art { background: var(--t-e8ddc6); display: flex; flex-direction: column; justify-content: center; align-items: center; } .arrival-art > b { font-size: 64px; letter-spacing: -4px; font-weight: 400; line-height: 1.2; margin: 20px 0; } .arrival-art > b > span { font-size: 15px; letter-spacing: 0; margin-left: 4px; font-family: Georgia, serif; font-style: italic; } .arrival-line { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--t-6d302b-30); padding-top: 17px; font-size: 8px; } .arrival-line i { width: 5px; height: 5px; background: var(--t-678156); border-radius: 50%; } .arrival-line > b { margin-left: 8px; } .team-art { background: var(--t-e2e5d8); padding-top: 57px; } .team-art > span:first-child { margin-bottom: 16px; } .team-art > div { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--t-52654a-1a); padding: 10px 0; } .avatar { background: var(--t-cdd5ba); width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; font-size: 8px; font-weight: 400; color: var(--t-3b5b37); } .avatar.peach { background: var(--t-edd5be); } .avatar.blue { background: var(--t-cfdbd9); } .team-art strong { font-weight: 500; font-size: 10px; } .team-art small { margin-left: auto; color: var(--t-516d3b); font-size: 7px; } .team-art .amber { color: var(--t-86623d); } .handover-art { background: var(--t-e9c7b1); padding: 48px 30px 25px; transform: rotate(2deg); border-radius: 6px 95px 6px 6px; } .handover-art > b { display: block; font: italic 28px/1.13 Georgia, serif; letter-spacing: -1px; margin: 16px 0; } .handover-art > p { font-size: 10px; color: var(--t-8b5144); line-height: 1.7; } .feature-number { font-size: 7px; letter-spacing: 0.08em; } .feature-card h3 { font-size: 28px; margin: 14px 0 15px; } .feature-card > p { font-size: 12px; line-height: 1.85; color: var(--muted); max-width: 335px; } .cc-demo-section { background: var(--t-eadbc8); padding: 95px 0; } .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; } .demo-copy h2 { margin: 28px 0; } .demo-copy > p:not(.eyebrow) { font-size: 14px; color: var(--muted); max-width: 370px; } .role-switch { display: inline-flex; border: 1px solid var(--t-6d302b-35); padding: 5px; border-radius: 30px; margin: 30px 0; } .role-switch button { background: transparent; border: 0; border-radius: 30px; padding: 11px 20px; font-size: 11px; } .role-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } #role-copy h3 { font-size: 24px; margin-bottom: 14px; } #role-copy p { font-size: 12px; color: var(--muted); line-height: 1.85; max-width: 360px; } .demo-copy .demo-note { font-size: 9px !important; margin-top: 28px; opacity: 0.85; } .demo-workspace { position: relative; max-width: 430px; width: 100%; justify-self: center; } .demo-window { background: var(--t-fffaf0); border: 1px solid var(--t-ceb69b); border-radius: 14px; box-shadow: 18px 25px 0 var(--s-d5bda4-4d), 0 35px 55px var(--s-633524-12); overflow: hidden; } .demo-window > header { border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 20px 26px; font-size: 14px; font-weight: 500; } .demo-window > header small { font-size: 7px; letter-spacing: 0.1em; color: var(--muted); } .demo-window > header i { display: inline-block; width: 5px; height: 5px; background: var(--rust); border-radius: 50%; margin-right: 5px; } .demo-greeting { padding: 26px 28px 0; } .demo-greeting p { font-size: 11px; color: var(--muted); } .demo-greeting h3 { font-size: 38px; margin-top: 10px; } .demo-clock { padding: 24px 28px 18px; display: flex; flex-direction: column; } .demo-clock > span { font-size: 7px; letter-spacing: 0.1em; } .demo-clock b { font-size: 67px; line-height: 1.2; font-weight: 400; letter-spacing: -4px; font-variant-numeric: tabular-nums; } .demo-clock small { font-size: 10px; color: var(--muted); min-height: 16px; } .demo-punch { display: flex; justify-content: space-between; background: var(--rust); color: var(--t-fff7eb); border: 0; border-radius: 6px; padding: 15px 19px; margin: 0 28px; width: calc(100% - 56px); font-size: 12px; } .demo-punch:disabled { background: var(--t-738165); cursor: default; } .demo-reset { font-size: 9px; border: 0; background: transparent; display: block; margin: 10px auto; } .demo-ledger { padding: 24px 28px; min-height: 100px; } .demo-ledger > span { font-size: 7px; letter-spacing: 0.1em; } .demo-ledger p { font-size: 10px; color: var(--muted); padding-top: 10px; display: flex; justify-content: space-between; } .demo-ledger b { font-weight: 400; } .demo-window > footer { font-size: 7px; padding: 14px 20px; text-align: center; background: var(--t-eee8d9); color: var(--t-80705a); border-top: 1px solid var(--t-6d302b-12); } .demo-side-label { position: absolute; right: -38px; top: 27%; writing-mode: vertical-rl; font-size: 7px; letter-spacing: 0.15em; } .people-summary { display: flex; margin: 30px 28px; justify-content: space-between; border-block: 1px solid var(--line); padding-block: 17px; } .people-summary > span { font-size: 9px; display: flex; flex-direction: column; } .people-summary b { font-size: 35px; line-height: 1.2; font-weight: 400; } .people-task { display: flex; align-items: center; gap: 15px; margin: 24px 28px; } .people-task > span { font-size: 26px; } .people-task b, .people-task small { display: block; font-size: 10px; font-weight: 500; } .people-task small { font-size: 8px; color: var(--muted); margin-top: 5px; } .cc-privacy { padding-block: 100px; } .privacy-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; margin-top: 45px; } .privacy-art { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; background: var(--t-ece6d7); border-radius: 50% 50% 6px 6px; padding: 30px; } .privacy-orb { font-size: 53px; letter-spacing: -2px; text-align: center; line-height: 1.06; z-index: 1; } .privacy-orb em { color: var(--t-8e5c45); } .privacy-line { display: flex; align-items: center; justify-content: space-between; position: absolute; top: 15%; width: 70%; font-size: 10px; gap: 25px; } .privacy-line i { flex: 1; border-top: 1px dashed var(--t-9c7858-65); } .privacy-art > span { position: absolute; bottom: 10%; text-align: center; font-size: 7px; letter-spacing: 0.1em; line-height: 1.8; } .privacy-copy > p { font-size: 13px; color: var(--muted); line-height: 1.9; margin-top: 25px; } .privacy-copy ul { list-style: none; padding: 0; margin: 28px 0; } .privacy-copy li { display: flex; gap: 20px; border-top: 1px solid var(--line); padding: 16px 0; } .privacy-copy li > span { font-size: 9px; padding-top: 4px; } .privacy-copy li b { font-size: 12px; font-weight: 500; } .privacy-copy li p { font-size: 10px; color: var(--muted); margin-top: 5px; line-height: 1.8; } .cc-details { background: var(--surface-deep); color: var(--t-faeede); padding: 85px 0; } .cc-details .eyebrow { color: var(--t-e4b7a1); } .cc-details h2 { margin: 28px 0 50px; } .detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .detail-grid article { border-top: 1px solid var(--t-f5e6d5-40); padding-top: 24px; } .detail-grid article > span { font-size: 30px; color: var(--t-ebba99); } .detail-grid h3 { font-size: 24px; letter-spacing: -0.7px; margin: 25px 0 16px; } .detail-grid p { font-size: 12px; color: var(--t-dec0b3); line-height: 1.8; } .estimate-note { font-size: 9px !important; color: var(--t-d0ab9b); margin-top: 40px !important; max-width: 820px; } .cc-faq { padding-block: 95px; max-width: 820px; } .cc-faq h2 { margin: 27px 0 40px; font-size: 47px; } .cc-faq details { border-top: 1px solid var(--line); } .cc-faq details:last-child { border-bottom: 1px solid var(--line); } .cc-faq summary { display: flex; justify-content: space-between; gap: 20px; font-size: 14px; cursor: pointer; padding: 23px 0; list-style: none; } .cc-faq summary::-webkit-details-marker { display: none; } .cc-faq summary > span { font-size: 22px; line-height: 1; } .cc-faq details[open] summary > span { transform: rotate(45deg); } .cc-faq details p { font-size: 13px; color: var(--muted); line-height: 1.85; padding-bottom: 25px; max-width: 730px; } .cc-close { background: var(--t-eac8b1); padding: 80px 0; overflow: hidden; } .cc-close > .wrap { position: relative; } .cc-close h2 { font-size: clamp(65px, 7.6vw, 110px); margin: 28px 0; position: relative; z-index: 2; } .cc-close p:not(.eyebrow) { font-size: 14px; color: var(--muted); margin-bottom: 25px; } .cc-close small { display: block; font-size: 9px; margin-top: 17px; } .close-sun { position: absolute; right: 0; top: 3%; font-size: 380px; line-height: 1; color: var(--t-c46e4d); animation: orbit 100s linear infinite; } .cc-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; padding-block: 50px 35px; } .footer-brand { font-size: 28px; letter-spacing: -1px; } .cc-footer p { font-size: 11px; color: var(--muted); margin-top: 6px; } .cc-footer nav { display: flex; justify-content: flex-end; align-content: flex-start; flex-wrap: wrap; gap: 16px 26px; font-size: 11px; } .cc-footer small { grid-column: 1/-1; font-size: 9px; line-height: 1.9; color: var(--muted); } .motion-control { position: fixed; bottom: 16px; right: 18px; z-index: 40; background: var(--t-f5eee4-e8); border: 1px solid var(--t-6d302b-40); border-radius: 30px; padding: 9px 13px; font-size: 10px; backdrop-filter: blur(10px); } .motion-paused * { animation-play-state: paused !important; } @keyframes float { 50% { transform: translateY(-12px) rotate(-4deg); } } @keyframes slip-float { 50% { translate: 0 -10px; } } @keyframes orbit { to { rotate: 360deg; } } @media (max-width: 1100px) { .wrap { width: calc(100% - 64px); } .cc-header nav { gap: 24px; } .clock-disc { width: 335px; height: 335px; } .cc-clock-scene { height: 530px; } .clock-hand.hour { height: 70px; } .clock-hand.minute { height: 105px; } .clock-hand.second { height: 116px; } .slip-in { top: 70px; left: -10px; padding: 15px; } .slip-out { right: 0; bottom: 36px; padding: 20px; } .cc-hero h1 { font-size: 68px; } .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; } .cc-hero { min-height: 730px; } .intro-heading { gap: 60px; } .demo-grid { gap: 65px; } .privacy-layout { gap: 45px; } .privacy-orb { font-size: 44px; } .feature-art { padding-inline: 20px; } .team-art > div { gap: 7px; } .team-art strong { font-size: 9px; } .team-art small { font-size: 6px; } .arrival-art > b { font-size: 55px; } .feature-card h3 { font-size: 25px; } .detail-grid { gap: 25px; } .close-sun { font-size: 290px; top: 15%; } } @media (max-width: 700px) { .wrap { width: calc(100% - 40px); } .cc-header { height: 82px; } .cc-brand svg { width: 35px; height: 35px; } .cc-brand > span { font-size: 25px; } .cc-brand > span > span { font-size: 11px; } .menu-toggle { display: block; background: none; border: 0; font-size: 12px; padding: 12px 0; } .cc-header nav { display: none; position: absolute; left: -20px; right: -20px; top: 81px; padding: 20px; background: var(--paper); box-shadow: 0 20px 25px var(--s-6d302b-1a); flex-direction: column; align-items: stretch; gap: 0; } .cc-header nav.open { display: flex; } .cc-header nav > a { padding: 14px; font-size: 14px; } .cc-header nav .button { justify-content: center; margin-top: 10px; } .cc-hero { display: block; padding-block: 35px 15px; min-height: 0; } .eyebrow { font-size: 7px; letter-spacing: 0.08em; } .cc-hero h1 { font-size: clamp(57px, 13.8vw, 78px); margin: 26px 0; line-height: 1.04; } .lede { font-size: 13px; line-height: 1.9; } .hero-actions { flex-direction: row; align-items: center; gap: 15px; flex-wrap: wrap; } .button { padding: 15px 20px; font-size: 11px; gap: 20px; } .hero-actions .text-link { font-size: 10px; } .availability { font-size: 7px; } .cc-clock-scene { height: 440px; margin-top: 30px; } .clock-disc { width: 285px; height: 285px; border-width: 11px; } .clock-number { font-size: 28px; } .n12 { top: 27px; } .n3 { right: 26px; } .n6 { bottom: 26px; } .n9 { left: 26px; } .clock-word { font-size: 8px; } .clock-sub { font-size: 5px; } .clock-hand.hour { height: 56px; } .clock-hand.minute { height: 83px; } .clock-hand.second { height: 101px; } .slip-in { top: 33px; left: -2px; padding: 13px 16px; gap: 10px; } .slip-in b { font-size: 11px; } .slip-in small { font-size: 9px; } .slip-icon { width: 27px; height: 27px; } .slip-out { right: 0; bottom: 33px; padding: 17px 20px; } .slip-out b { font-size: 21px; } .slip-out > span { font-size: 6px; } .slip-out svg { height: 23px; width: 70px; margin-top: 6px; } .scene-caption { font-size: 6px; bottom: 5px; left: 4%; } .cc-orbit { max-width: 100%; } .cc-promise-strip { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 8px; } .cc-promise-strip > span:first-child { font-size: 14px; } .cc-intro { padding-block: 60px; } .intro-heading { display: block; margin: 25px 0 35px; } h2 { font-size: 43px; } .intro-heading > p { font-size: 13px; margin-top: 25px; } .feature-mosaic { grid-template-columns: 1fr; gap: 36px; } .feature-art { height: 280px; padding-inline: 35px; } .feature-card h3 { font-size: 31px; } .feature-card > p { font-size: 13px; max-width: none; } .feature-number { font-size: 8px; } .arrival-art > b { font-size: 73px; } .arrival-line { font-size: 10px; } .team-art > div { gap: 15px; } .team-art strong { font-size: 12px; } .team-art small { font-size: 9px; } .team-art > span:first-child { font-size: 8px; } .avatar { width: 32px; height: 32px; font-size: 10px; } .handover-art > b { font-size: 36px; } .handover-art > p { font-size: 13px; } .cc-demo-section { padding: 60px 0; } .demo-grid { grid-template-columns: 1fr; gap: 40px; } .demo-side-label { display: none; } .demo-window { box-shadow: 9px 14px 0 var(--s-d5bda4-4d); } .demo-copy > p:not(.eyebrow) { font-size: 13px; } .demo-copy h2 { margin: 25px 0; } .cc-privacy { padding-block: 60px; } .privacy-layout { grid-template-columns: 1fr; gap: 38px; margin-top: 30px; } .privacy-art { max-width: 380px; width: 100%; justify-self: center; } .privacy-orb { font-size: 49px; } .privacy-copy h2 { font-size: 44px; } .cc-details { padding: 60px 0; } .cc-details h2 { font-size: 39px; margin-bottom: 35px; } .detail-grid { grid-template-columns: 1fr 1fr; gap: 30px 23px; } .detail-grid h3 { font-size: 23px; margin-top: 17px; } .detail-grid p { font-size: 11px; } .estimate-note { font-size: 8px !important; } .cc-faq { padding-block: 60px; } .cc-faq h2 { font-size: 40px; margin-bottom: 30px; } .cc-faq summary { font-size: 13px; } .cc-faq details p { font-size: 12px; } .cc-close { padding: 60px 0 250px; } .cc-close h2 { font-size: 58px; } .cc-close p:not(.eyebrow) { font-size: 13px; } .close-sun { font-size: 220px; right: calc(50% - 110px); top: auto; bottom: -240px; } .cc-footer { grid-template-columns: 1fr; padding-block: 35px 65px; gap: 25px; } .cc-footer nav { justify-content: flex-start; font-size: 10px; gap: 15px 22px; } .cc-footer small { font-size: 8px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { animation: none !important; transition: none !important; } } .cc-enter { animation: cc-arrive 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes cc-arrive { from { opacity: 0.25; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } /* --- Dark palette, tuned by hand ------------------------------------------- * The generated --d- values invert lightness, which is right for most of the * page and wrong in three places: surfaces that were already dark would turn * white, text that was already light would turn dark, and card elevation * would end up upside down. These are those cases. * -------------------------------------------------------------------------- */ :root { /* Surfaces that stay deep in BOTH themes: the detail band and the table head. */ --surface-deep: #6d302b; --surface-deep-2: #7d3a33; /* Page, cards, and the spotlight column — deepest at the back, lightest in front. */ --d-f5eee4: #17110d; --d-ecdfd0: #1e1711; --d-fdf9f3: #241d16; --d-fffdfa: #2b231b; --d-f6ebdf: #2c241c; --d-fff6ed: #342a20; /* Ink and its quieter voices. */ --d-6d302b: #f2e2d4; --d-85645a: #bda595; --d-927265: #a68d7e; --d-80705a: #a2907c; /* The rust accent keeps its hue and gains light so it still reads as accent. */ --d-a84734: #e08a6a; --d-c46e4d: #e59774; --d-8c382a: #d9765c; --d-b07a5f: #c99a7c; --d-eac8b1: #8a5233; /* Already light on a dark ground — these must not invert. */ --d-faeede: #faeede; --d-f7e3d3: #f7e3d3; --d-e4b7a1: #e4b7a1; --d-ebba99: #ebba99; --d-dec0b3: #dec0b3; --d-d0ab9b: #d0ab9b; --d-f6dcc6: #f6dcc6; --d-f5e6d540: #f5e6d540; --d-ffffff1f: #ffffff1f; /* Leaf greens sit on cards, so they lift rather than flip. */ --d-3b5b37: #7da46b; --d-516d3b: #8cb277; --d-647c4a: #9ac184; --d-678156: #a3c88e; --d-738165: #aecb9c; } :root[data-theme="dark"] { --surface-deep: #2a1712; --surface-deep-2: #3a201a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-deep: #2a1712; --surface-deep-2: #3a201a; } } /* --- Theme toggle ---------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--line); border-radius: 40px; padding: 7px 13px 7px 10px; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: inherit; transition: border-color 0.2s, background 0.2s; } .theme-toggle:hover { border-color: var(--rust); } .theme-toggle-icon { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); flex: none; } .theme-toggle[aria-pressed="true"] .theme-toggle-icon { background: linear-gradient(90deg, transparent 50%, currentColor 50%); } /* --- Why Cicada: the honest comparison --- */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cc-compare { background: var(--t-ecdfd0); padding-block: 90px 95px; } .compare-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 65px; margin: 28px 0 40px; } .compare-heading h2 { font-size: clamp(42px, 4.6vw, 64px); } .compare-heading > p { max-width: 330px; font-size: 13px; line-height: 1.85; color: var(--muted); } .compare-shell { position: relative; } .compare-hint { display: none; justify-content: flex-end; align-items: center; gap: 9px; font-size: 9px; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 13px; } .compare-hint i { font-style: normal; font-size: 13px; animation: cc-nudge 1.9s ease-in-out infinite; } @keyframes cc-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } .compare-scroll { overflow-x: auto; background: var(--t-fdf9f3); border: 1px solid var(--t-6d302b-20); border-radius: 14px; box-shadow: 0 34px 60px -48px var(--s-6d302b-b0); -webkit-overflow-scrolling: touch; } .compare-scroll:focus-visible { outline-offset: 3px; } .compare-inner { position: relative; min-width: 1280px; } .compare-spotlight { position: absolute; left: 19%; width: 22%; top: 0; bottom: 0; z-index: 1; pointer-events: none; border: 1px solid var(--t-6d302b-33); border-radius: 12px; box-shadow: 0 0 0 6px var(--s-eac8b1-99), 0 30px 48px -30px var(--s-6d302b-cc); } .compare-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; } .compare-col-head { width: 19%; } .compare-col-us { width: 22%; } .compare-table th, .compare-table td { text-align: left; vertical-align: top; font-weight: 400; padding: 22px 20px; border-bottom: 1px solid var(--t-6d302b-16); } .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; } .compare-table thead th { background: linear-gradient(180deg, var(--surface-deep-2), var(--surface-deep)); color: var(--t-f7e3d3); font-size: 10px; letter-spacing: 0.16em; padding-block: 17px; border-bottom: 0; vertical-align: middle; } .compare-table thead th.is-us { background: var(--t-eac8b1); color: var(--ink); border-radius: 11px 11px 0 0; position: relative; } .compare-table thead th.is-us b { display: block; font-size: 13px; font-weight: 500; letter-spacing: -0.02em; } .compare-badge { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); background: var(--surface-deep); color: var(--t-f6dcc6); border-radius: 20px; padding: 4px 9px; font-size: 8px; letter-spacing: 0.16em; } .compare-head-label { opacity: 0.6; } .compare-row-head { position: sticky; left: 0; z-index: 2; background: var(--t-fdf9f3); box-shadow: 1px 0 0 var(--s-6d302b-16); } .compare-table thead .compare-row-head { background: linear-gradient(180deg, var(--surface-deep-2), var(--surface-deep)); z-index: 3; box-shadow: 1px 0 0 var(--s-ffffff-1f); } .compare-row-head i { display: block; font-style: normal; font-size: 9px; letter-spacing: 0.16em; color: var(--t-b07a5f); margin-bottom: 11px; } .compare-row-head b { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.25; } .compare-row-head em { display: block; margin-top: 9px; font-size: 11.5px; line-height: 1.65; color: var(--muted); } .compare-table td { font-size: 12px; line-height: 1.8; color: var(--muted); } .compare-table td.is-us { background: var(--t-fffdfa); color: var(--ink); font-size: 12.5px; } .compare-table tbody tr:hover .compare-row-head, .compare-table tbody tr:hover td { background: var(--t-f6ebdf); } .compare-table tbody tr:hover td.is-us { background: var(--t-fff6ed); } .compare-close { display: flex; align-items: flex-end; justify-content: space-between; gap: 55px; margin-top: 36px; } .compare-close p { font-size: 14px; line-height: 1.85; color: var(--muted); max-width: 770px; } .compare-close b { font-weight: 500; color: var(--ink); } .compare-note { font-size: 9px; color: var(--t-927265); margin-top: 28px; max-width: 830px; line-height: 1.8; } @media (max-width: 1240px) { .compare-hint { display: flex; } } @media (max-width: 1100px) { .compare-table th, .compare-table td { padding: 18px 15px; } } @media (max-width: 900px) { .compare-heading { flex-direction: column; align-items: flex-start; gap: 20px; } .compare-heading > p { max-width: none; } .compare-close { flex-direction: column; align-items: flex-start; gap: 20px; } } @media (max-width: 700px) { .cc-compare { padding-block: 58px 60px; } .compare-heading h2 { font-size: 39px; } .compare-inner { min-width: 900px; } .compare-col-head { width: 17%; } .compare-col-us { width: 22%; } .compare-spotlight { left: 17%; width: 22%; box-shadow: 0 0 0 4px var(--s-eac8b1-99), 0 20px 34px -24px var(--s-6d302b-cc); } .compare-scroll { border-radius: 11px; } .compare-table th, .compare-table td { padding: 16px 13px; } .compare-row-head b { font-size: 12.5px; } .compare-row-head em { font-size: 10.5px; } .compare-table td { font-size: 11px; } .compare-table td.is-us { font-size: 11.5px; } .compare-badge { display: none; } .compare-close p { font-size: 13px; } } /* --- Theme corrections ------------------------------------------------------ * The closing band keeps a warm ground in dark mode, so its text is pinned. * -------------------------------------------------------------------------- */ .cc-close p:not(.eyebrow), .cc-close small { color: var(--on-warm-muted); } .cc-close h2, .cc-close .eyebrow { color: var(--on-warm); } :root { --on-warm: #4a1f1a; --on-warm-muted: #6d4a3e; } :root[data-theme="dark"] { --on-warm: #f7e6d8; --on-warm-muted: #ead6c6; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --on-warm: #f7e6d8; --on-warm-muted: #ead6c6; } } /* --- The cicada ------------------------------------------------------------ * She sits on the rim of the clock rather than flying across it: a hero that * moves constantly is a hero nobody can read. So the motion is small and * occasional — a slow breath, a wing shimmer every few seconds, antennae * that drift, and the song going out in rings that echo the orbits already * drawn behind the dial. Everything here stops for the pause control and for * prefers-reduced-motion. * -------------------------------------------------------------------------- */ .cc-cicada { position: absolute; top: 11%; right: 7%; width: clamp(170px, 24%, 252px); overflow: visible; z-index: 3; transform-origin: 30% 50%; animation: cc-perch 11s ease-in-out infinite; pointer-events: none; } .cc-cicada * { transform-box: fill-box; } /* Body */ .cc-thorax, .cc-head, .cc-abdomen { fill: var(--t-8e5c45); stroke: var(--t-6d302b); stroke-width: 1.1; } .cc-abdomen { fill: var(--t-c07542); } .cc-seg, .cc-antenna, .cc-legs path { fill: none; stroke: var(--t-6d302b); stroke-width: 1.1; stroke-linecap: round; opacity: 0.55; } .cc-eye { fill: var(--t-a84734); stroke: var(--t-6d302b); stroke-width: 0.9; } .cc-antenna { transform-origin: 90% 50%; animation: cc-antenna 5.5s ease-in-out infinite; } /* Wings: a warm wash with veins drawn over it. */ .cc-wing-skin { fill: var(--t-eac8b1); fill-opacity: 0.44; stroke: var(--t-6d302b); stroke-width: 0.9; stroke-opacity: 0.45; } .cc-vein { fill: none; stroke: var(--t-6d302b); stroke-width: 0.6; stroke-opacity: 0.42; } .cc-wing { transform-origin: 4% 60%; } .cc-wing-fore { animation: cc-wing-fore 7s cubic-bezier(0.3, 0, 0.2, 1) infinite; } .cc-wing-hind { animation: cc-wing-hind 7s cubic-bezier(0.3, 0, 0.2, 1) infinite; } /* The song. Three rings, staggered, going out and fading. */ .cc-song circle { fill: none; stroke: var(--t-a84734); stroke-width: 0.7; transform-origin: center; opacity: 0; animation: cc-song 7s ease-out infinite; } .cc-song circle:nth-child(2) { animation-delay: 0.45s; } .cc-song circle:nth-child(3) { animation-delay: 0.9s; } @keyframes cc-perch { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-7deg); } 50% { transform: translate3d(-6px, 8px, 0) rotate(-4.5deg); } } @keyframes cc-antenna { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-7deg); } 70% { transform: rotate(4deg); } } /* Still for most of the loop, then a short shimmer — the way a real one sits. */ @keyframes cc-wing-fore { 0%, 72% { transform: rotate(0deg) translateY(0); } 76% { transform: rotate(-13deg) translateY(-2px); } 80% { transform: rotate(-2deg) translateY(0); } 84% { transform: rotate(-11deg) translateY(-1.5px); } 88%, 100% { transform: rotate(0deg) translateY(0); } } @keyframes cc-wing-hind { 0%, 73% { transform: rotate(0deg); } 77% { transform: rotate(7deg); } 81% { transform: rotate(1deg); } 85% { transform: rotate(6deg); } 89%, 100% { transform: rotate(0deg); } } @keyframes cc-song { 0% { opacity: 0; transform: scale(0.35); } 14% { opacity: 0.26; } 60%, 100% { opacity: 0; transform: scale(5.2); } } @media (max-width: 900px) { .cc-cicada { width: clamp(140px, 30%, 190px); top: 8%; right: 4%; } } @media (max-width: 560px) { .cc-cicada { width: 140px; top: 2%; right: 0; } }