/* ========================================================================== Origin Media — main stylesheet Concept: "Charged" — navy foundations, electric-blue interaction, gold action. Critical above-the-fold CSS is inlined per-page in ; this file carries the rest. See DESIGN_NOTES.md. ========================================================================== */ :root{ --navy:#1A1A2E; --navy-deep:#12121F; --blue:#2D6FE0; --blue-deep:#1E3A5F; --green:#1B4332; --gold:#C9A84C; --gold-bright:#E0C266; --paper:#F6F5F1; --ink:#1A1A2E; --mist:#5B6472; --line:#E3E1DA; --white:#fff; --font-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif; --font-body:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --maxw:1200px; --radius:18px; --radius-sm:12px; --shadow:0 18px 50px -22px rgba(18,18,31,.35); --shadow-lift:0 30px 70px -28px rgba(26,26,46,.45); --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper); line-height:1.65;font-size:1.0625rem;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;overflow-x:hidden; } img,svg,picture{max-width:100%;display:block;height:auto} a{color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:3px} h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08; letter-spacing:-.02em;color:var(--navy);margin:0 0 .5em;overflow-wrap:break-word} p,li,blockquote,td,th,a{overflow-wrap:break-word} h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.4rem);font-weight:800} h2{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem)} h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem)} p{margin:0 0 1.1rem} ul,ol{margin:0 0 1.1rem;padding-left:1.2rem} :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px} ::selection{background:var(--gold);color:var(--navy)} /* Layout primitives ------------------------------------------------------- */ .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)} .section{padding-block:clamp(3.5rem,7vw,6.5rem)} .section--tight{padding-block:clamp(2.5rem,5vw,4rem)} .section--navy{background:var(--navy);color:#E8E9F1} .section--navy h1,.section--navy h2,.section--navy h3{color:#fff} .section--paper{background:var(--paper)} .section--mint{background:linear-gradient(180deg,#fff, #F1F3EF)} .lede{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:var(--mist);max-width:62ch} .section--navy .lede{color:#B7BDD2} .center{text-align:center;margin-inline:auto} .center .lede{margin-inline:auto} .grid{display:grid;gap:clamp(1rem,2.5vw,1.8rem)} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} /* Eyebrow + voltage line -------------------------------------------------- */ .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body); font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase; color:var(--blue);margin:0 0 1rem} .section--navy .eyebrow{color:var(--gold)} .eyebrow .bolt{width:14px;height:14px;fill:var(--gold);flex:none} .eyebrow::after{content:"";width:34px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--gold),transparent)} /* Buttons ----------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1; padding:.95rem 1.5rem;border-radius:999px;border:2px solid transparent; cursor:pointer;text-decoration:none;transition:transform .25s var(--ease), box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease); white-space:nowrap} .btn svg{width:18px;height:18px;flex:none} .btn--primary{background:var(--gold);color:var(--navy); box-shadow:0 12px 30px -10px rgba(201,168,76,.7)} .btn--primary:hover{background:var(--gold-bright);transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(201,168,76,.85)} .btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)} .section--navy .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)} .btn--ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)} .section--navy .btn--ghost:hover{background:#fff;color:var(--navy)} .btn--blue{background:var(--blue);color:#fff;box-shadow:0 12px 30px -12px rgba(45,111,224,.8)} .btn--blue:hover{background:#2a64c9;transform:translateY(-2px)} .btn--block{width:100%} .btn--lg{padding:1.1rem 1.9rem;font-size:1.06rem} .actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem} /* Header ------------------------------------------------------------------ */ .site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86); backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)} .site-header .container{display:flex;align-items:center;justify-content:space-between; gap:1rem;min-height:72px} .brand{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display); font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:var(--navy); text-decoration:none} .brand .o{color:var(--navy)}.brand .m{color:var(--blue)} .brand .bolt{width:16px;height:24px;fill:var(--gold);margin-inline:-1px} .nav{display:flex;align-items:center;gap:.3rem} .nav a{font-weight:600;font-size:.97rem;color:var(--navy);text-decoration:none; padding:.55rem .7rem;border-radius:8px;transition:color .2s,background .2s} .nav a:hover{color:var(--blue);background:rgba(45,111,224,.07)} .nav a[aria-current="page"]{color:var(--blue)} .nav a[aria-current="page"]::after{content:"";display:block;height:2px;border-radius:2px; background:var(--gold);margin-top:3px} .header-cta{display:flex;align-items:center;gap:.6rem} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem; color:var(--navy)} .nav-toggle svg{width:28px;height:28px} /* Hero -------------------------------------------------------------------- */ .hero{position:relative;background:var(--navy);color:#EaEbf3;overflow:hidden;isolation:isolate} .hero::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(60% 60% at 25% 18%,rgba(45,111,224,.28),transparent 60%), radial-gradient(50% 50% at 90% 90%,rgba(201,168,76,.16),transparent 60%), linear-gradient(180deg,var(--navy),var(--navy-deep))} .hero .container{padding-block:clamp(3rem,7vw,5.5rem)} .hero h1{color:#fff;max-width:16ch} .hero .hl{color:var(--gold)} .hero-lede{color:#BfC4d8;font-size:clamp(1.1rem,1rem + .6vw,1.4rem);max-width:48ch} .hero-visual{position:relative} .hero-visual img{border-radius:var(--radius);box-shadow:var(--shadow-lift); border:1px solid rgba(255,255,255,.08)} .hero-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem} /* Pills, tags ------------------------------------------------------------- */ .pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600; padding:.4rem .85rem;border-radius:999px;background:rgba(255,255,255,.07); color:#D8DCEA;border:1px solid rgba(255,255,255,.14)} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)} .tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--blue);background:rgba(45,111,224,.1); padding:.3rem .6rem;border-radius:6px} /* Cards ------------------------------------------------------------------- */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:#d3d0c6} .card h3{margin-bottom:.4rem} .card .icon{width:48px;height:48px;display:grid;place-items:center;border-radius:12px; background:linear-gradient(140deg,rgba(45,111,224,.14),rgba(201,168,76,.14)); margin-bottom:1rem} .card .icon svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.8} .card--feature{background:linear-gradient(150deg,var(--navy),var(--blue-deep));color:#E8E9F1; border:0} .card--feature h3{color:#fff} .card--feature .icon{background:rgba(255,255,255,.1)} .card--feature .icon svg{stroke:var(--gold)} .card .card-link{font-weight:700;color:var(--blue);text-decoration:none; display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem} .card .card-link:hover{gap:.7rem} .card--feature .card-link{color:var(--gold)} /* Stats ------------------------------------------------------------------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem} .stat .num{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,1.4rem + 2vw,2.9rem); color:var(--gold);line-height:1} .stat .lbl{font-size:.9rem;color:#BfC4d8;margin-top:.35rem} .section--paper .stat .lbl{color:var(--mist)} .section--paper .stat .num{color:var(--blue)} /* List with bolts --------------------------------------------------------- */ .bolt-list{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.85rem} .bolt-list li{display:flex;gap:.7rem;align-items:flex-start} .bolt-list .bolt{width:18px;height:18px;fill:var(--gold);flex:none;margin-top:.2rem} /* Stat / proof bar -------------------------------------------------------- */ .proofbar{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;align-items:center; justify-content:center;color:#B7BDD2;font-weight:600;font-size:.9rem} .proofbar .pb{display:flex;align-items:center;gap:.5rem} .proofbar svg{width:18px;height:18px;fill:var(--gold)} /* Forms ------------------------------------------------------------------- */ .field{display:grid;gap:.4rem;margin-bottom:1rem} .field label{font-weight:700;font-size:.92rem;color:var(--navy)} .field input,.field textarea,.field select{font-family:inherit;font-size:1rem; padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:var(--radius-sm); background:#fff;color:var(--ink);width:100%;transition:border-color .2s,box-shadow .2s} .field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--blue);box-shadow:0 0 0 4px rgba(45,111,224,.14)} .field textarea{min-height:130px;resize:vertical} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form-note{font-size:.84rem;color:var(--mist)} .form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--shadow)} .consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--mist)} .consent input{width:auto;margin-top:.25rem} /* Accordion (FAQ) --------------------------------------------------------- */ .accordion{display:grid;gap:.8rem;max-width:820px;margin-inline:auto} .acc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden} .acc summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;font-weight:700; font-family:var(--font-display);font-size:1.08rem;color:var(--navy); display:flex;justify-content:space-between;align-items:center;gap:1rem} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"+";font-size:1.5rem;color:var(--blue);transition:transform .25s;flex:none} .acc[open] summary::after{transform:rotate(45deg)} .acc .acc-body{padding:0 1.3rem 1.2rem;color:var(--mist)} .acc .acc-body p:last-child{margin-bottom:0} /* Testimonials ------------------------------------------------------------ */ .quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.1rem);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1rem} .quote .stars{color:var(--gold);letter-spacing:2px;font-size:1.05rem} .quote blockquote{margin:0;font-size:1.12rem;color:var(--ink);font-weight:500} .quote .who{display:flex;align-items:center;gap:.8rem;margin-top:auto} .quote .avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(140deg,var(--blue),var(--blue-deep));color:#fff;font-weight:800; font-family:var(--font-display)} .quote .who b{display:block;color:var(--navy)} .quote .who span{font-size:.86rem;color:var(--mist)} /* Package / pricing ------------------------------------------------------- */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.6rem);align-items:start} .plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(1.5rem,3vw,2rem);box-shadow:var(--shadow);position:relative;display:flex; flex-direction:column;gap:.4rem} .plan--featured{border:2px solid var(--gold);box-shadow:var(--shadow-lift);transform:translateY(-6px)} .plan .plan-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:var(--gold);color:var(--navy);font-weight:800;font-size:.74rem; letter-spacing:.08em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px} .plan h3{margin:0} .plan .who{color:var(--mist);font-size:.92rem;min-height:2.6em} .plan .price{font-family:var(--font-display);font-weight:800;font-size:2.2rem;color:var(--navy); margin:.3rem 0} .plan .price small{font-size:.9rem;font-weight:600;color:var(--mist)} .plan ul{list-style:none;padding:0;margin:.6rem 0 1.2rem;display:grid;gap:.6rem} .plan ul li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem} .plan ul li svg{width:18px;height:18px;flex:none;margin-top:.15rem;stroke:var(--green);fill:none;stroke-width:2.4} .plan .btn{margin-top:auto} /* Comparison table -------------------------------------------------------- */ .compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)} table.compare{width:100%;border-collapse:collapse;min-width:640px} table.compare th,table.compare td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--line)} table.compare thead th{background:var(--navy);color:#fff;font-family:var(--font-display);position:sticky;top:0} table.compare thead th.feat{background:var(--blue-deep)} table.compare tbody th{font-weight:700;color:var(--navy);background:#FAFAF7} table.compare td{text-align:center;color:var(--mist)} table.compare td.yes{color:var(--green);font-weight:800} table.compare td.no{color:#C2C0B8} table.compare tbody tr:hover td,table.compare tbody tr:hover th{background:#F4F6FF} table.compare .col-feat{background:rgba(201,168,76,.07)} /* Map / contact ----------------------------------------------------------- */ .map-embed{border:0;width:100%;height:100%;min-height:340px;border-radius:var(--radius); filter:grayscale(.2) contrast(1.05)} .info-list{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem} .info-list li{display:flex;gap:.9rem;align-items:flex-start} .info-list .ic{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center; background:rgba(45,111,224,.1)} .info-list .ic svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.8} .info-list a{color:var(--navy);text-decoration:none;font-weight:700} .info-list a:hover{color:var(--blue)} .info-list small{display:block;color:var(--mist);font-weight:500} /* Booking embed ----------------------------------------------------------- */ .booking-frame{background:#fff;border:2px dashed var(--blue);border-radius:var(--radius); padding:clamp(1.8rem,4vw,3rem);text-align:center;color:var(--mist)} .booking-frame .bolt{width:34px;height:34px;fill:var(--gold);margin:0 auto .8rem} /* CTA band ---------------------------------------------------------------- */ .cta-band{background:linear-gradient(135deg,var(--navy),var(--blue-deep));color:#fff; border-radius:var(--radius);padding:clamp(2rem,5vw,3.5rem);text-align:center; position:relative;overflow:hidden;isolation:isolate} .cta-band::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(50% 80% at 80% 10%,rgba(201,168,76,.22),transparent 60%)} .cta-band h2{color:#fff} .cta-band .lede{color:#C7CCDD;margin-inline:auto} /* Footer ------------------------------------------------------------------ */ .site-footer{background:var(--navy-deep);color:#A9AFC4;font-size:.95rem} .site-footer .container{padding-block:clamp(2.8rem,5vw,4rem)} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem} .site-footer h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase; font-family:var(--font-body);margin:0 0 1rem} .site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem} .site-footer a{color:#A9AFC4;text-decoration:none} .site-footer a:hover{color:#fff} .foot-brand .brand{color:#fff;font-size:1.5rem} .foot-brand .brand .o{color:#fff} .foot-brand p{max-width:34ch;margin-top:1rem} .socials{display:flex;gap:.6rem;margin-top:1.2rem} .socials a{width:40px;height:40px;border-radius:10px;display:grid;place-items:center; background:rgba(255,255,255,.07);transition:background .2s,transform .2s} .socials a:hover{background:var(--gold);transform:translateY(-2px)} .socials svg{width:20px;height:20px;fill:#fff} .socials a:hover svg{fill:var(--navy)} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.4rem;padding-top:1.5rem; display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.86rem} .foot-bottom .legal{display:flex;flex-wrap:wrap;gap:1rem} /* Cookie banner ----------------------------------------------------------- */ .cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;max-width:560px; margin-inline:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-lift);padding:1.2rem 1.3rem;display:none} .cookie.show{display:block;animation:rise .4s var(--ease)} .cookie p{font-size:.9rem;margin:0 0 .9rem;color:var(--mist)} .cookie .cookie-actions{display:flex;flex-wrap:wrap;gap:.6rem} .cookie .btn{padding:.7rem 1.1rem;font-size:.92rem} /* Chat widget ------------------------------------------------------------- */ .chat-launch{position:fixed;right:1.1rem;bottom:1.1rem;z-index:75;width:60px;height:60px; border-radius:50%;border:0;cursor:pointer;background:linear-gradient(140deg,var(--blue),var(--blue-deep)); box-shadow:0 16px 36px -10px rgba(45,111,224,.7);display:grid;place-items:center; transition:transform .25s var(--ease)} .chat-launch:hover{transform:scale(1.07)} .chat-launch svg{width:28px;height:28px;fill:#fff} .chat-launch .ping{position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%; background:var(--gold);border:2px solid #fff} .chat-panel{position:fixed;right:1.1rem;bottom:5.6rem;z-index:76;width:min(340px,calc(100vw - 2rem)); background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lift); overflow:hidden;display:none} .chat-panel.show{display:block;animation:rise .35s var(--ease)} .chat-head{background:var(--navy);color:#fff;padding:1rem 1.2rem;display:flex;align-items:center;gap:.7rem} .chat-head .avatar{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy); display:grid;place-items:center;font-weight:800;font-family:var(--font-display)} .chat-head b{display:block;font-size:.98rem}.chat-head small{color:#9aa1bb} .chat-body{padding:1.1rem 1.2rem;display:grid;gap:.7rem;background:#FAFAF7} .chat-msg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem; font-size:.92rem;color:var(--ink)} .chat-body .btn{margin-top:.3rem} .chat-foot{padding:.7rem 1.2rem;font-size:.76rem;color:var(--mist);text-align:center;border-top:1px solid var(--line)} /* eBook popup ------------------------------------------------------------- */ .modal{position:fixed;inset:0;z-index:90;background:rgba(18,18,31,.62); backdrop-filter:blur(4px);display:none;place-items:center;padding:1.2rem} .modal.show{display:grid;animation:fade .3s ease} .modal-card{background:#fff;border-radius:var(--radius);max-width:880px;width:100%; display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden;box-shadow:var(--shadow-lift); position:relative;animation:rise .4s var(--ease)} .modal-aside{background:linear-gradient(160deg,var(--navy),var(--blue-deep));color:#fff; padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center;gap:.6rem} .modal-aside .bolt{width:40px;height:40px;fill:var(--gold);margin-bottom:.4rem} .modal-aside h3{color:#fff;font-size:1.7rem} .modal-aside ul{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.5rem;font-size:.92rem;color:#Cfd4e6} .modal-aside ul li{display:flex;gap:.5rem;align-items:flex-start} .modal-aside ul li::before{content:"⚡";color:var(--gold)} .modal-main{padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center} .modal-close{position:absolute;top:.8rem;right:.8rem;width:38px;height:38px;border-radius:50%; border:0;background:rgba(255,255,255,.15);color:#fff;font-size:1.3rem;cursor:pointer;z-index:2;line-height:1} .modal-main .modal-close{background:#F1EFEA;color:var(--navy)} .modal-close:hover{background:var(--gold);color:var(--navy)} /* Page hero (interior pages) --------------------------------------------- */ .page-hero{background:var(--navy);color:#E8E9F1;position:relative;overflow:hidden;isolation:isolate} .page-hero::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(55% 70% at 15% 10%,rgba(45,111,224,.25),transparent 60%), radial-gradient(50% 60% at 95% 100%,rgba(201,168,76,.14),transparent 60%), linear-gradient(180deg,var(--navy),var(--navy-deep))} .page-hero .container{padding-block:clamp(3rem,6vw,4.6rem)} .page-hero h1{color:#fff;max-width:18ch} .page-hero p{color:#BfC4d8;max-width:60ch} .breadcrumb{font-size:.86rem;color:#8E95AE;margin-bottom:1rem} .breadcrumb a{color:#B7BDD2;text-decoration:none} .breadcrumb a:hover{color:#fff} /* Prose (legal pages) ----------------------------------------------------- */ .prose{max-width:780px;margin-inline:auto} .prose h2{margin-top:2.2rem} .prose h3{margin-top:1.6rem;font-size:1.2rem} .prose ul{display:grid;gap:.5rem} .prose table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem} .prose th,.prose td{border:1px solid var(--line);padding:.7rem .8rem;text-align:left;vertical-align:top} .prose th{background:#FAFAF7} .prose .placeholder{background:#FFF7E0;border:1px solid #E8D58A;color:#7a5d12; padding:.1rem .4rem;border-radius:5px;font-size:.92em;font-weight:600} .updated{color:var(--mist);font-size:.9rem} /* Reveal animations ------------------------------------------------------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.is-visible{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--navy); padding:.7rem 1rem;border-radius:0 0 8px 0;font-weight:700;z-index:200} .skip-link:focus{left:0} .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Responsive -------------------------------------------------------------- */ @media (max-width:980px){ .split{grid-template-columns:1fr;gap:2.4rem} .cols-4{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} .price-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto} .plan--featured{transform:none} .modal-card{grid-template-columns:1fr} .modal-aside{display:none} } @media (max-width:760px){ .nav,.header-cta .btn--ghost{display:none} .nav-toggle{display:inline-flex} .nav.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column; align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:.6rem 1rem 1.2rem; gap:.2rem;box-shadow:var(--shadow)} .nav.open a{padding:.85rem .6rem;border-radius:8px} .nav.open a[aria-current="page"]::after{display:none} .cols-2,.cols-3{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .foot-bottom{flex-direction:column} } @media (max-width:420px){ .cols-4{grid-template-columns:1fr} h1{font-size:clamp(2rem,1.2rem + 4vw,2.4rem)} .hero h1,.page-hero h1{max-width:100%} .hero-lede,.hero-badges,.proofbar{max-width:100%} .pill{font-size:.78rem} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} } /* ---- brand.css ---- */ /* ========================================================================== ALFRED — Private OS · brand layer Appended to the shared OM stylesheet by build.py (CONFIG["extra_css"]). The shared shell inlines a LIGHT critical block in AFTER the stylesheet link, so every override of those selectors is prefixed with `body ` to win on specificity (see _website_toolkit/README.md). Tone: understated, discreet, technical, calm. No gold, no hype. ========================================================================== */ :root{ --steel:#8FB6E0; --steel-soft:rgba(143,182,224,.14); --panel:rgba(255,255,255,.035); --panel-2:rgba(255,255,255,.055); --hair:rgba(255,255,255,.09); --radius:14px; --radius-sm:10px; --shadow:0 24px 60px -34px rgba(0,0,0,.9); --shadow-lift:0 40px 90px -40px rgba(0,0,0,.95); --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } /* ---- Dark canvas: undo the light critical block -------------------------- */ body{background:var(--paper);color:var(--ink);font-size:1.0625rem} body h1,body h2,body h3,body h4{color:#F2F5F9;font-weight:500;letter-spacing:-.015em} body h1{font-size:clamp(2.3rem,1.3rem + 4vw,4.1rem);line-height:1.04} body h2{font-weight:500} body a{color:var(--steel)} body ::selection{background:var(--steel);color:#07090C} body :focus-visible{outline:2px solid var(--steel);outline-offset:3px} body .site-header{background:rgba(8,10,14,.72);backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--hair)} body .site-header .container{min-height:74px} body .brand{color:#fff;font-weight:500;font-size:1.18rem;letter-spacing:.34em; text-transform:uppercase;font-family:var(--font-body)} body .brand .bolt{display:none} body .brand .o{color:#fff} body .brand .m{color:transparent;width:0;overflow:hidden} body .brand::after{content:"Private OS";font-family:var(--font-body);font-size:.6rem; letter-spacing:.22em;color:var(--mist);border-left:1px solid var(--hair); padding-left:.7rem;margin-left:.15rem;align-self:center;text-transform:uppercase} body .nav a{color:#C6CEDA;font-weight:500;font-size:.93rem} body .nav a:hover{color:#fff;background:var(--panel)} body .nav a[aria-current="page"]{color:#fff} body .nav a[aria-current="page"]::after{background:var(--steel)} body .nav-toggle{color:#fff} body .btn{border-radius:6px;font-weight:600;font-size:.95rem;letter-spacing:.01em; padding:.9rem 1.4rem;border-width:1px} body .btn--primary{background:var(--gold);color:#07090C;box-shadow:none} body .btn[disabled]{opacity:.55;cursor:progress} body .btn--primary:hover{background:#fff;transform:translateY(-1px);box-shadow:0 14px 34px -18px rgba(255,255,255,.5)} body .btn--ghost{background:transparent;color:#E6EBF2;border-color:var(--hair)} body .btn--ghost:hover{background:var(--panel-2);color:#fff;transform:translateY(-1px)} body .btn--blue{background:transparent;color:var(--steel);border-color:rgba(143,182,224,.4);box-shadow:none} body .btn--blue:hover{background:var(--steel-soft);color:#fff} body .hero,body .page-hero{background:var(--navy-deep);color:#D6DDE7} body .hero::before{background: radial-gradient(70% 60% at 20% 0%,rgba(143,182,224,.13),transparent 62%), radial-gradient(50% 50% at 92% 100%,rgba(143,182,224,.07),transparent 60%), linear-gradient(180deg,#0A0D11,#06080B)} body .page-hero::before{background: radial-gradient(55% 70% at 12% 0%,rgba(143,182,224,.16),transparent 62%), radial-gradient(50% 60% at 96% 100%,rgba(143,182,224,.06),transparent 60%), linear-gradient(180deg,#0A0D11,#06080B)} body .page-hero p{color:#9FAAB9} body .hero .hl{color:var(--steel)} body .hero-lede,body .lede{color:#9FAAB9} body .section--navy{background:var(--navy-deep)} body .section--paper{background:var(--paper)} body .section--mint{background:linear-gradient(180deg,#0C1015,#0A0D11)} body .eyebrow{color:var(--mist);font-weight:600;font-size:.7rem;letter-spacing:.24em; font-family:var(--mono)} body .eyebrow .bolt{display:none} body .eyebrow::after{background:linear-gradient(90deg,var(--hair),transparent);width:46px} body .section--navy .eyebrow{color:var(--mist)} body .card{background:var(--panel);border:1px solid var(--hair);box-shadow:none; border-radius:var(--radius);backdrop-filter:blur(4px)} body .card:hover{transform:translateY(-3px);border-color:rgba(143,182,224,.34); box-shadow:var(--shadow)} body .card h3{color:#EFF3F8;font-size:1.14rem} body .card p{color:var(--mist)} body .card .icon{background:var(--panel-2);border:1px solid var(--hair);border-radius:10px; width:42px;height:42px} body .card .icon svg{stroke:var(--steel);width:20px;height:20px} body .card--feature{background:linear-gradient(160deg,rgba(143,182,224,.12),rgba(255,255,255,.02)); border:1px solid rgba(143,182,224,.26)} body .card .card-link{color:var(--steel)} body .pill{background:var(--panel);border-color:var(--hair);color:#BCC6D3;font-weight:500; font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;border-radius:5px} body .pill .dot{background:var(--steel)} body .tag{color:var(--steel);background:var(--steel-soft);border-radius:4px;font-family:var(--mono)} body .stat .num{color:#fff;font-weight:400;font-family:var(--font-display)} body .stat .lbl{color:var(--mist)} body .section--paper .stat .num{color:#fff} body .bolt-list .bolt{display:none} /* base sets display:flex, which turns into its own flex item and breaks the "Term — description" rhythm; block restores normal inline wrapping. */ body .bolt-list li{display:block;color:#C3CBD6;padding-left:1.35rem;position:relative} body .bolt-list li strong{color:#E7ECF2;font-weight:600} body .bolt-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px; background:var(--steel)} body .field label{color:#D7DEE7;font-weight:500;font-size:.85rem;letter-spacing:.02em} body .field input,body .field textarea,body .field select{background:rgba(0,0,0,.35); border:1px solid var(--hair);color:var(--ink);border-radius:var(--radius-sm)} body .field input::placeholder,body .field textarea::placeholder{color:#5D6875} body .field input:focus,body .field textarea:focus,body .field select:focus{ border-color:var(--steel);box-shadow:0 0 0 3px rgba(143,182,224,.16)} body .form-card{background:var(--panel);border:1px solid var(--hair);box-shadow:var(--shadow); border-radius:var(--radius)} body .form-note{color:var(--mist)} body .consent{color:var(--mist)} body .booking-frame{background:var(--panel);border:1px dashed var(--hair);color:var(--mist)} body .booking-frame .bolt{display:none} body .acc{background:var(--panel);border:1px solid var(--hair);border-radius:var(--radius-sm)} body .acc summary{color:#EAEFF5;font-weight:500;font-size:1rem} body .acc summary::after{color:var(--steel)} body .acc .acc-body{color:var(--mist)} body .quote{background:var(--panel);border:1px solid var(--hair);box-shadow:none} body .quote blockquote{color:#DDE4EC;font-weight:400} body .quote .who b{color:#fff} body .quote .avatar{background:var(--panel-2);color:#fff;border:1px solid var(--hair)} body .quote .stars{color:var(--steel)} body .plan{background:var(--panel);border:1px solid var(--hair);box-shadow:none; border-radius:var(--radius)} body .plan--featured{border:1px solid rgba(143,182,224,.45); background:linear-gradient(170deg,rgba(143,182,224,.1),rgba(255,255,255,.02)); box-shadow:var(--shadow)} body .plan .plan-badge{background:var(--steel);color:#07090C;font-weight:600;font-family:var(--mono)} body .plan .price{color:#fff;font-weight:400} body .plan .price small{color:var(--mist)} body .plan .who{color:var(--mist)} body .plan ul li{color:#C3CBD6} body .plan ul li svg{stroke:var(--steel)} body .compare-wrap{background:var(--panel);border:1px solid var(--hair)} body table.compare thead th{background:#0C1015;color:#fff} body table.compare thead th.feat{background:#101821} body table.compare tbody th{background:transparent;color:#E4EAF1;font-weight:500} body table.compare th,body table.compare td{border-bottom:1px solid var(--hair)} body table.compare td{color:var(--mist)} body table.compare td.yes{color:var(--steel)} body table.compare td.no{color:#4A535F} body table.compare tbody tr:hover td,body table.compare tbody tr:hover th{background:rgba(143,182,224,.05)} body table.compare .col-feat{background:rgba(143,182,224,.05)} body .info-list .ic{background:var(--panel-2);border:1px solid var(--hair)} body .info-list .ic svg{stroke:var(--steel)} body .info-list a{color:#fff} body .info-list a:hover{color:var(--steel)} body .info-list small{color:var(--mist)} body .cta-band{background:linear-gradient(140deg,#0D1319,#080B0F); border:1px solid var(--hair);border-radius:var(--radius)} body .cta-band::before{background:radial-gradient(60% 90% at 78% 0%,rgba(143,182,224,.16),transparent 62%)} body .cta-band .lede{color:#9FAAB9} body .site-footer{background:#06080B;border-top:1px solid var(--hair);color:#8792A0} body .site-footer a{color:#8792A0} body .site-footer a:hover{color:#fff} body .socials a{background:var(--panel);border:1px solid var(--hair)} body .socials a:hover{background:var(--steel-soft);transform:translateY(-2px)} body .socials a:hover svg{fill:var(--steel)} body .foot-brand .brand{font-size:1.1rem} body .cookie{background:#0C1015;border:1px solid var(--hair);color:#B7C0CC; box-shadow:var(--shadow-lift)} body .cookie p{color:#B7C0CC} /* build.py inlines style="color:var(--navy)" on the decline button — invisible on a dark banner, so this override has to beat an inline style. */ body .cookie .btn--ghost{color:#E6EBF2 !important;border-color:rgba(255,255,255,.22) !important} body .cookie .btn--ghost:hover{background:var(--panel-2) !important} body .cookie-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem} body .breadcrumb{color:var(--mist);font-family:var(--mono);font-size:.78rem;letter-spacing:.06em} body .breadcrumb a{color:var(--mist)} body .updated{color:var(--mist);font-family:var(--mono);font-size:.76rem} body .prose{color:#BCC5D1;max-width:70ch} body .prose h2,body .prose h3{margin-top:2rem} body .prose a{color:var(--steel)} /* ========================================================================== NEW COMPONENTS ========================================================================== */ /* ---- Fine grain overlay + hairline rules --------------------------------- */ .grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.035; background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px); background-size:3px 3px;mix-blend-mode:overlay} .rule{height:1px;background:linear-gradient(90deg,transparent,var(--hair),transparent); margin-block:0} .mono{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase; color:var(--mist)} /* ---- Hero ---------------------------------------------------------------- */ .hero--alfred{min-height:88vh;display:grid;align-items:center;position:relative} .hero--alfred .container{position:relative;z-index:2} .hero--alfred h1{max-width:15ch;font-weight:300} .hero--alfred h1 .hl{font-style:italic} .hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:2.4rem; font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mist)} .hero-meta span{display:inline-flex;align-items:center;gap:.5rem} .hero-meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--steel); opacity:.8} .scroll-cue{position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);z-index:3; font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--mist); display:grid;justify-items:center;gap:.6rem;text-transform:uppercase} .scroll-cue i{display:block;width:1px;height:44px; background:linear-gradient(180deg,var(--steel),transparent);animation:cue 2.4s infinite} @keyframes cue{0%{opacity:0;transform:scaleY(.2)}40%{opacity:1;transform:scaleY(1)} 100%{opacity:0;transform:scaleY(1)}} /* Word-by-word headline reveal (JS adds .word spans) */ .reveal-words .word{display:inline-block;opacity:0;transform:translateY(.5em); transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal-words.is-in .word{opacity:1;transform:none} /* ---- Scroll-scrub sequence ---------------------------------------------- */ .scrub{position:relative;background:#06080B} .scrub-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid; place-items:center} .scrub-stage::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 58% at 50% 45%,transparent 40%,rgba(4,6,8,.72) 100%)} .scrub-canvas{width:100%;height:100%;object-fit:cover;display:block} .scrub-loading{position:absolute;inset:0;display:grid;place-items:center;z-index:6; background:#06080B;transition:opacity .6s ease} .scrub-loading.done{opacity:0;pointer-events:none} .scrub-loading .bar{width:min(260px,60vw);height:1px;background:var(--hair);margin-top:1rem; overflow:hidden} .scrub-loading .bar i{display:block;height:100%;width:0;background:var(--steel); transition:width .25s linear} /* HUD */ .scrub-hud{position:absolute;left:clamp(1.1rem,4vw,2.4rem);bottom:clamp(1.2rem,4vw,2.2rem); z-index:5;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--mist); text-transform:uppercase;display:grid;gap:.55rem} .scrub-hud .track{width:clamp(120px,22vw,220px);height:1px;background:var(--hair);position:relative} .scrub-hud .track i{position:absolute;inset:0 auto 0 0;background:var(--steel);width:0} .scrub-chapter{position:absolute;right:clamp(1.1rem,4vw,2.4rem);bottom:clamp(1.2rem,4vw,2.2rem); z-index:5;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:#C7D0DB; text-transform:uppercase;text-align:right;max-width:44vw} /* Information bubbles */ .bubbles{position:absolute;inset:0;z-index:4;pointer-events:none} .bubble{position:absolute;width:min(330px,72vw);pointer-events:auto; background:rgba(9,12,16,.82);backdrop-filter:blur(10px) saturate(130%); border:1px solid var(--hair);border-radius:var(--radius);padding:1.1rem 1.2rem; opacity:0;transform:translateY(14px) scale(.985); transition:opacity .55s var(--ease),transform .55s var(--ease); box-shadow:var(--shadow)} .bubble.is-on{opacity:1;transform:none} .bubble h3{font-size:1.02rem;margin:0 0 .4rem;color:#fff;font-weight:500;letter-spacing:-.005em} .bubble p{margin:0;font-size:.9rem;line-height:1.55;color:#A9B4C1} .bubble .idx{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--steel); display:block;margin-bottom:.5rem} .bubble::before{content:"";position:absolute;left:0;top:1.15rem;width:2px;height:22px; background:var(--steel);border-radius:2px} .bubble--l{left:clamp(1rem,6vw,5rem)} .bubble--r{right:clamp(1rem,6vw,5rem)} .bubble--t{top:clamp(5rem,14vh,10rem)} .bubble--m{top:50%;transform:translateY(calc(-50% + 14px)) scale(.985)} .bubble--m.is-on{transform:translateY(-50%)} .bubble--b{bottom:clamp(6rem,16vh,11rem)} .scrub-outro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5; text-align:center;width:min(640px,86vw);opacity:0;transition:opacity .7s var(--ease); background:radial-gradient(70% 90% at 50% 50%,rgba(5,7,10,.92),rgba(5,7,10,.62) 70%,transparent); padding:clamp(1.6rem,4vw,2.6rem);border-radius:20px;backdrop-filter:blur(3px)} .scrub-outro.is-on{opacity:1} .scrub-outro h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem);margin-bottom:.6rem} .scrub-outro p{color:#A9B4C1;margin:0 auto;max-width:46ch} /* Static fallback (shown by the