/* ============================================================================ Scrittor — design system Poppins, royal blue, orange accent, square buttons, white ground. ========================================================================== */ /* ---------------------------------------------------------------- 1. tokens */ :root{ /* surface */ --paper:#ffffff; --paper-2:#f7f9fd; --paper-3:#eef2fb; --grey:#f9f9f9; --card:#ffffff; --dark:#101218; --dark-2:#181b23; --dark-3:#22262f; /* ink — every value clears WCAG AA on its intended ground */ --ink:#101218; /* 18.7:1 on white */ --ink-2:#494b51; /* 8.7:1 on white */ --ink-3:#5a5d64; /* 6.6:1 on white, 5.9:1 on the tinted panel */ --ink-inv:#ffffff; --ink-inv-2:#c8ccd6; --ink-dim:#9aa0ac; /* brand — royal blue. #2550aa is 7.5:1 both as text on white and behind white text, so a single token covers links, buttons and icons. */ --blue:#2550aa; --blue-deep:#1d3f89; --blue-electric:#2200dd; --blue-bright:#4175fc; --blue-soft:#eef2fb; --blue-line:#ccd8ef; /* orange — decorative marks only (3:1 non-text threshold). --orange-text is the darkened variant used when orange carries words. */ --orange:#ff4200; --orange-text:#c73000; --orange-soft:#fff0eb; /* On the electric-blue band the brand orange only reaches 2.86:1. This lighter tint is 4.28:1 there, so accent words and icons stay legible on blue. */ --orange-on-blue:#ff8a5e; /* line */ --line:#e4e8f0; --line-2:#f0f3f8; --line-dark:#2a2e38; /* type */ --sans:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --display:var(--sans); --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,"Liberation Mono",monospace; /* rhythm — square corners, the Scrittor signature */ --wrap:1220px; --gut:clamp(18px,4vw,40px); --sec:clamp(60px,8vw,110px); --r:0px; --r-card:10px; --r-lg:14px; --shadow:0 2px 10px rgba(16,18,24,.05); --shadow-lift:0 10px 40px -12px rgba(16,18,24,.16); --ease:cubic-bezier(.22,.61,.36,1); } /* -------------------------------------------------------------- 2. baseline */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--ink-2); font-family:var(--sans);font-size:16.5px;line-height:1.72;font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--display);margin:0;color:var(--ink);font-weight:700;letter-spacing:-.015em;line-height:1.18} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--blue);outline-offset:3px} ::selection{background:var(--blue-electric);color:#fff} /* --------------------------------------------------------------- 3. layout */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .sec{padding-block:var(--sec)} .sec-tight{padding-block:calc(var(--sec)*.62)} .grid{display:grid;gap:clamp(16px,2.2vw,26px)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,68px);align-items:start} .split-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .split-6-5{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center} @media(max-width:1024px){.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:960px){.g3{grid-template-columns:repeat(2,1fr)}.split,.split-7-5,.split-6-5{grid-template-columns:1fr}} @media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}} @media(max-width:700px){.tabs{grid-template-columns:1fr}.tablist{flex-direction:row;flex-wrap:wrap}.tablist label{flex:1 1 46%}} /* ------------------------------------------------------------ 4. type scale */ .d1{font-size:clamp(2.35rem,5.4vw,3.75rem);line-height:1.16;font-weight:700} .d2{font-size:clamp(1.85rem,3.8vw,3rem);line-height:1.2;font-weight:700} .d3{font-size:clamp(1.4rem,2.3vw,1.95rem);font-weight:700} .d4{font-size:clamp(1.08rem,1.5vw,1.26rem);font-weight:600;letter-spacing:-.005em} .lede{font-size:clamp(1rem,1.35vw,1.12rem);color:var(--ink-2);line-height:1.78;max-width:62ch} .small{font-size:.92rem;color:var(--ink-2);line-height:1.72} .tiny{font-size:.81rem;color:var(--ink-3)} .measure{max-width:64ch} .accent{color:var(--blue)} .mark{color:var(--orange)} .eyebrow{ display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:16px; } .eyebrow::before{content:"";width:22px;height:3px;background:var(--orange);flex:none} .eyebrow.on-dark{color:#fff} .idx{font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--orange-text)} .center{text-align:center} .center .eyebrow{justify-content:center} .center .lede{margin-inline:auto} /* --------------------------------------------------------------- 5. buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 32px;border-radius:var(--r);border:2px solid transparent; font-weight:600;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase; cursor:pointer;transition:background .16s,color .16s,border-color .16s,transform .16s var(--ease); white-space:nowrap; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:none} .btn .ic{width:16px;height:16px;transition:transform .2s var(--ease)} .btn:hover .ic{transform:translateX(3px)} .btn-p{background:var(--blue);color:#fff} .btn-p:hover{background:var(--blue-deep)} .btn-a{background:var(--orange);color:#fff} .btn-a:hover{background:var(--orange-text)} .btn-s{border-color:var(--blue);color:var(--blue);background:transparent} .btn-s:hover{background:var(--blue);color:#fff} .btn-ghost{color:var(--blue);padding:0;text-transform:none;letter-spacing:0;font-size:.95rem} .btn-ghost:hover{color:var(--blue-deep)} .on-dark .btn-s,.hero-band .btn-s,.hero-shot .btn-s{border-color:#fff;color:#fff} .on-dark .btn-s:hover,.hero-band .btn-s:hover,.hero-shot .btn-s:hover{background:#fff;color:var(--blue-electric)} .on-dark .btn-p,.hero-band .btn-p,.hero-shot .btn-p{background:#fff;color:var(--blue)} .on-dark .btn-p:hover,.hero-band .btn-p:hover,.hero-shot .btn-p:hover{background:var(--orange);color:#fff} .btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .center .btn-row{justify-content:center} @media(max-width:480px){.btn-row .btn{flex:1 1 100%}} /* ---------------------------------------------------------------- 6. header */ .hdr{position:sticky;top:0;z-index:60;background:var(--blue);color:#fff} .hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px} .logo{display:flex;align-items:center;gap:11px;min-height:44px;color:#fff; font-size:1.4rem;font-weight:700;letter-spacing:-.03em} .logo .glyph{width:34px;height:34px;background:#fff;color:var(--blue-electric);flex:none; display:grid;place-items:center;font-size:1rem;font-weight:700;border-radius:3px} .logo .sfx{display:block;font-size:.6rem;font-weight:500;letter-spacing:.06em; text-transform:uppercase;opacity:.82;margin-top:-4px} .nav{display:flex;align-items:center;gap:4px} .nav a{display:inline-flex;align-items:center;min-height:42px;padding:9px 16px; font-size:.94rem;font-weight:500;color:rgba(255,255,255,.86);transition:color .15s} .nav a:hover,.nav a[aria-current]{color:#fff} .nav a[aria-current]{font-weight:600;box-shadow:inset 0 -3px 0 var(--orange)} .nav .btn{margin-left:12px;padding:12px 24px;font-size:.79rem} .hdr .btn-p{background:var(--orange);color:#fff} .hdr .btn-p:hover{color:#fff} .burger{display:none;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.4); background:transparent;color:#fff;place-items:center;cursor:pointer;border-radius:3px} @media(max-width:960px){ .nav{position:fixed;inset:78px 0 auto;flex-direction:column;align-items:stretch;gap:0; background:var(--blue);padding:10px var(--gut) 24px; transform:translateY(-8px);opacity:0;visibility:hidden;transition:.18s var(--ease); max-height:calc(100dvh - 78px);overflow:auto} .nav[data-open="1"]{transform:none;opacity:1;visibility:visible} .nav a{padding:15px 2px;font-size:1.02rem;border-bottom:1px solid rgba(255,255,255,.14)} .nav a[aria-current]{box-shadow:none;color:var(--orange)} .nav .btn{margin:16px 0 0} .burger{display:grid} } /* ------------------------------------------------------------- 7. hero band */ .hero-band{background:var(--blue-electric);color:#fff;padding-block:clamp(58px,8vw,104px); position:relative;overflow:hidden} .hero-band h1,.hero-band h2{color:#fff} .hero-band .lede{color:rgba(255,255,255,.86);max-width:56ch} .hero-band .tiny{color:rgba(255,255,255,.72)} .hero-band .mark,.on-dark .mark{color:var(--orange-on-blue)} .hero-band .eyebrow::before,.on-dark .eyebrow::before{background:var(--orange-on-blue)} .hero-band .ticks .ic,.on-dark .ticks .ic,.hero-trust .ic{color:var(--orange-on-blue)} .on-dark .acc summary .ic,.on-dark .quote{border-color:var(--orange-on-blue)} .hero-deco{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5} .hero-deco span{position:absolute;border:1.5px solid rgba(255,255,255,.16);border-radius:50%;display:block} .hero-deco span:nth-child(1){width:340px;height:340px;right:-90px;top:-130px} .hero-deco span:nth-child(2){width:520px;height:520px;right:-170px;top:-220px} .hero-deco span:nth-child(3){width:180px;height:180px;left:-70px;bottom:-90px;border-color:rgba(255,66,0,.35)} .hero-band .wrap{position:relative;z-index:1} .hero-trust{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:32px;font-size:.9rem;color:rgba(255,255,255,.9)} .hero-trust span{display:inline-flex;align-items:center;gap:9px} .hero-trust .ic{width:17px;height:17px;color:var(--orange-on-blue)} /* 7.1 photo hero — the brand's original treatment: a photo backdrop under a dark wash so white text stays readable, with a small uppercase eyebrow line above the headline. Used on the homepage; inner pages keep the plain solid-blue .hero-band above for a calmer, more legible reading page. */ .hero-photo{background:#1a1206 url('/assets/img/hero-banner.jpg') center/cover no-repeat} .hero-photo::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(180deg,rgba(10,8,4,.78),rgba(10,8,4,.62) 55%,rgba(10,8,4,.82));} .hero-photo .wrap{position:relative;z-index:1} .hero-eyebrow-line{display:block;font-size:.82rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:14px} .hero-photo h1{font-weight:800} .hero-photo .hero-sub{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;color:#fff;margin-top:6px} .hero-photo .hero-note{font-style:italic;color:rgba(255,255,255,.86);margin-top:16px;font-size:1.05rem} /* --------------------------------------------------- 7.3 expert/team card */ .team-card{background:linear-gradient(135deg,#6d4ec2,#4b2f9e);border-radius:var(--r-lg); padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:1fr auto 1fr;gap:24px; align-items:center;color:#fff} .team-card .who{color:#fff} .team-photo{width:100%;max-width:220px;aspect-ratio:1;object-fit:cover;border-radius:12px; justify-self:center} .team-list a,.team-list span{display:flex;align-items:center;gap:8px;padding:9px 4px; border-bottom:1px solid rgba(255,255,255,.18);font-size:.92rem;color:rgba(255,255,255,.92)} .team-info{background:#fff;border-radius:10px;padding:18px 20px;color:var(--ink)} .team-info .who{color:var(--ink);font-size:1.02rem} .team-stars{color:#ffb400;letter-spacing:2px;margin-top:4px;font-size:.9rem} .team-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} @media(max-width:820px){.team-card{grid-template-columns:1fr}} /* --------------------------------------------------------- 7.4 testimonial photo */ .t-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none} /* ----------------------------------------------------------- 7.5 CTA photo band */ .cta-photo-panel{border-radius:var(--r-lg);overflow:hidden;background:var(--blue-electric); display:flex;align-items:flex-end;justify-content:center;min-height:280px} .cta-photo-panel img{width:100%;max-width:340px;height:auto;display:block} /* -------------------------------------------------------- 7.6 minimal footer */ .ftr-min{background:var(--grey);padding-block:30px;border-top:1px solid var(--line)} .ftr-min .wrap{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center} .ftr-social{display:flex;gap:14px} .ftr-social a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%; background:#fff;border:1px solid var(--line);color:var(--ink-2);transition:background .15s,color .15s} .ftr-social a:hover{background:var(--blue);color:#fff;border-color:var(--blue)} .ftr-min .small{color:var(--ink-3)} /* --------------------------------------------------- 8. dashboard mockup art */ .mock{position:relative} .mock-win{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25);margin-bottom:104px} .mock-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--paper-3);border-bottom:1px solid var(--line)} .mock-bar i{width:9px;height:9px;border-radius:50%;background:#c9d0dd;display:block} .mock-bar i:nth-child(1){background:#ff5f57}.mock-bar i:nth-child(2){background:#febc2e} .mock-bar i:nth-child(3){background:#28c840} .mock-bar span{margin-left:auto;font-size:.66rem;color:var(--ink-3);font-weight:500} .mock-body{padding:18px;background:#fff} .mock-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px} .mock-lbl{display:block;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:600} .mock-row b{font-size:1.6rem;font-weight:700;color:var(--ink);letter-spacing:-.02em} .mock-row em{font-style:normal;font-size:.74rem;font-weight:600;color:var(--orange-text)} .mock-chart{display:flex;align-items:flex-end;gap:5px;height:92px;margin:16px 0 8px} .mock-chart b{flex:1;background:var(--blue-bright);display:block} .mock-chart b:nth-child(n+8){background:var(--blue-electric)} .mock-legend{display:flex;gap:16px;flex-wrap:wrap;padding-top:13px;border-top:1px solid var(--line)} .mock-legend span{font-size:.68rem;color:var(--ink-3);display:inline-flex;align-items:center;gap:7px;font-weight:500} .mock-legend i{width:9px;height:9px;display:block;background:var(--blue-bright)} .mock-card{position:absolute;left:-26px;bottom:0;background:#fff;border-radius:8px; padding:15px 18px;box-shadow:var(--shadow-lift);border-left:4px solid var(--orange)} .mock-card b{display:block;font-size:1.45rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin:2px 0} .mock-card .up{color:var(--blue);font-size:.78rem;font-weight:600} @media(max-width:960px){.mock{margin-top:42px}.mock-win{margin-bottom:0} .mock-card{position:static;margin-top:16px;display:inline-block}} /* --------------------------------------------------- 9. vertical tab switcher */ .tabs{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:26px;align-items:start} .tabs>input{position:absolute;opacity:0;width:1px;height:1px} .tablist{display:flex;flex-direction:column;gap:10px} .tablist label{ display:flex;flex-direction:column;align-items:center;gap:9px;padding:22px 16px; background:var(--grey);border-radius:var(--r-card);cursor:pointer;text-align:center; font-weight:600;font-size:1rem;color:var(--ink);border-right:4px solid transparent; transition:background .16s,border-color .16s,color .16s; } .tablist label .ic{width:30px;height:30px;color:var(--ink-3);transition:color .16s} .tablist label:hover{background:var(--blue-soft)} .panes>.pane{display:none;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,3vw,34px)} .tabs>input:nth-of-type(1):checked~.tablist label:nth-of-type(1), .tabs>input:nth-of-type(2):checked~.tablist label:nth-of-type(2), .tabs>input:nth-of-type(3):checked~.tablist label:nth-of-type(3), .tabs>input:nth-of-type(4):checked~.tablist label:nth-of-type(4){ background:var(--blue-soft);border-right-color:var(--orange);color:var(--orange-text)} .tabs>input:nth-of-type(1):checked~.tablist label:nth-of-type(1) .ic, .tabs>input:nth-of-type(2):checked~.tablist label:nth-of-type(2) .ic, .tabs>input:nth-of-type(3):checked~.tablist label:nth-of-type(3) .ic, .tabs>input:nth-of-type(4):checked~.tablist label:nth-of-type(4) .ic{color:var(--orange)} .tabs>input:nth-of-type(1):checked~.panes>.pane:nth-of-type(1), .tabs>input:nth-of-type(2):checked~.panes>.pane:nth-of-type(2), .tabs>input:nth-of-type(3):checked~.panes>.pane:nth-of-type(3), .tabs>input:nth-of-type(4):checked~.panes>.pane:nth-of-type(4){display:block} .tabs>input:focus-visible~.tablist label{outline:none} .tabs>input:nth-of-type(1):focus-visible~.tablist label:nth-of-type(1), .tabs>input:nth-of-type(2):focus-visible~.tablist label:nth-of-type(2), .tabs>input:nth-of-type(3):focus-visible~.tablist label:nth-of-type(3), .tabs>input:nth-of-type(4):focus-visible~.tablist label:nth-of-type(4){outline:3px solid var(--blue);outline-offset:2px} @media(max-width:860px){ .tabs{grid-template-columns:1fr} .tablist{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px} .tablist label{flex:1 0 auto;flex-direction:row;padding:14px 18px;font-size:.92rem; border-right:0;border-bottom:4px solid transparent} .tablist label .ic{width:22px;height:22px} .tabs>input:nth-of-type(1):checked~.tablist label:nth-of-type(1), .tabs>input:nth-of-type(2):checked~.tablist label:nth-of-type(2), .tabs>input:nth-of-type(3):checked~.tablist label:nth-of-type(3), .tabs>input:nth-of-type(4):checked~.tablist label:nth-of-type(4){ border-right-color:transparent;border-bottom-color:var(--orange)} } /* ---------------------------------------------------------------- 10. cards */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:28px; transition:border-color .18s,transform .2s var(--ease),box-shadow .2s} .card.link{display:flex;flex-direction:column} .card.link>:last-child{margin-top:auto;padding-top:18px} .card.link:hover{border-color:var(--blue-line);transform:translateY(-4px);box-shadow:var(--shadow-lift)} .card h3{margin-bottom:9px} .card-ic{width:52px;height:52px;border-radius:var(--r-card);display:grid;place-items:center;margin-bottom:18px; background:var(--blue-soft);color:var(--blue)} .card-ic.teal{background:var(--orange-soft);color:var(--orange-text)} .card-ic.gold{background:#eef7ee;color:#1f6b3a} .panel{background:var(--paper-2);border-radius:var(--r-lg);padding:clamp(26px,4.5vw,54px)} .on-dark{background:var(--dark);color:var(--ink-inv-2)} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff} .on-dark .lede,.on-dark .small{color:var(--ink-inv-2)} .on-dark .card{background:var(--dark-2);border-color:var(--line-dark)} .on-dark .tiny{color:var(--ink-dim)} .on-dark .accent{color:#8fb0ff} .on-dark .eyebrow{color:#fff} /* ------------------------------------------------------------ 11. logo wall */ .logos{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(24px,4vw,44px); display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(18px,3vw,34px);align-items:center} .logos span{display:grid;place-items:center;font-weight:700;font-size:.95rem;color:var(--ink-3); letter-spacing:-.01em;text-align:center;opacity:.8} @media(max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}} @media(max-width:480px){.logos{grid-template-columns:repeat(2,1fr)}} /* ------------------------------------------------------------- 12. stat bar */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden} .stats>div{background:var(--card);padding:26px 28px} .stats b{display:block;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink)} .stats span{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:9px;font-weight:600} .on-dark .stats{background:var(--line-dark);border-color:var(--line-dark)} .on-dark .stats>div{background:var(--dark-2)} .on-dark .stats b{color:#fff}.on-dark .stats span{color:var(--ink-dim)} @media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}} /* ------------------------------------------------------------ 13. list rows */ .rows{border-top:1px solid var(--line)} .rows>li,.rows>a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:clamp(14px,3vw,34px); align-items:start;padding:28px 0;border-bottom:1px solid var(--line)} .rows.wide>li{grid-template-columns:52px minmax(0,240px) minmax(0,1fr)} .rows>a{transition:padding-left .2s var(--ease)} .rows>a:hover{padding-left:8px} .rows>a:hover h3{color:var(--blue)} .rows .go{align-self:center;color:var(--ink-3)} @media(max-width:860px){.rows.wide>li{grid-template-columns:52px minmax(0,1fr)} .rows.wide>li>*:last-child{grid-column:2}} @media(max-width:620px){.rows>li,.rows>a{grid-template-columns:34px minmax(0,1fr);gap:14px}.rows .go{display:none}} .ticks li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;color:var(--ink-2);font-size:.96rem} .ticks .ic{width:19px;height:19px;flex:none;margin-top:5px;color:var(--orange);stroke-width:2.6} .on-dark .ticks li,.hero-band .ticks li{color:rgba(255,255,255,.88)} /* ---------------------------------------------------------- 14. quote / case */ .quote{border-left:4px solid var(--orange);padding-left:24px} .quote p{font-size:clamp(1.08rem,1.8vw,1.32rem);font-weight:500;line-height:1.6;color:var(--ink)} .quote cite{display:block;margin-top:16px;font-style:normal;font-size:.85rem;color:var(--ink-3);font-weight:500} .on-dark .quote p{color:#fff}.on-dark .quote cite{color:var(--ink-dim)} .metric{display:flex;gap:clamp(20px,4vw,46px);flex-wrap:wrap;margin:26px 0 0} .metric div b{display:block;font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700;letter-spacing:-.03em;color:var(--blue)} .metric div span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600} /* ------------------------------------------------------------ 15. accordion */ .acc{border-top:1px solid var(--line)} .acc details{border-bottom:1px solid var(--line)} .acc summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0; cursor:pointer;list-style:none;font-weight:600;font-size:1.05rem;color:var(--ink)} .acc summary::-webkit-details-marker{display:none} .acc summary .ic{flex:none;color:var(--orange);transition:transform .2s var(--ease)} .acc details[open] summary .ic{transform:rotate(45deg)} .acc .body{padding:0 0 24px;color:var(--ink-2);max-width:72ch} /* ----------------------------------------------------------------- 16. form */ .field{display:block;margin-bottom:18px} .field>span{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:7px} .field>span em{font-style:normal;color:var(--orange-text)} .field input,.field select,.field textarea{ width:100%;padding:14px 16px;background:#fff;border:1.5px solid var(--line);border-radius:4px; font-size:.97rem;transition:border-color .15s,box-shadow .15s} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)} .field textarea{min-height:140px;resize:vertical} .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .err{background:var(--orange-soft);border-left:4px solid var(--orange);color:var(--orange-text); padding:15px 18px;font-size:.9rem;margin-bottom:22px} .err ul{list-style:disc;padding-left:18px;margin-top:6px} /* --------------------------------------------------------------- 17. footer */ .ftr{background:var(--dark);color:var(--ink-inv-2);padding-block:clamp(50px,7vw,84px) 30px} .ftr .small,.ftr .lede,.ftr p{color:var(--ink-inv-2)} .ftr a{color:var(--ink-inv-2);font-size:.94rem;line-height:2.05;transition:color .15s} .ftr a:hover{color:#fff} @media(max-width:920px){.ftr a{display:inline-block;padding-block:9px;line-height:1.7}} .ftr .fh{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:14px} .ftr .logo{color:#fff} .ftr .logo .glyph{background:#fff;color:var(--dark)} /* Three link columns by default; four when brand.social is populated and the Elsewhere column renders. :has() lets the grid follow the markup. */ .ftr-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,48px)} .ftr-top:has(> div:nth-child(4)){grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))} .ftr-btm{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-top:50px;padding-top:26px;border-top:1px solid var(--line-dark);font-size:.83rem;color:var(--ink-dim)} @media(max-width:860px){.ftr-top{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.ftr-top{grid-template-columns:1fr}} /* ------------------------------------------------------------ 18. utilities */ .pill{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border:1.5px solid var(--line); font-size:.79rem;color:var(--ink-2);background:#fff;font-weight:500;border-radius:3px} .pill.hot{background:var(--orange-soft);border-color:#ffd4c6;color:var(--orange-text)} .on-dark .pill,.hero-band .pill{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff} .rule{height:1px;background:var(--line);border:0;margin:0} .mt-s{margin-top:14px}.mt{margin-top:26px}.mt-l{margin-top:46px} .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px} .chip{font-size:.72rem;padding:5px 11px;background:var(--blue-soft);color:var(--blue-deep); border-radius:3px;font-weight:500} .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;z-index:99;background:#fff;color:var(--blue-electric);padding:12px 20px;font-weight:600} /* --------------------------------------------------------------- 19. reveal */ /* Visible by default. JS only ADDS the animation, so a blocked script can never leave the page blank. */ .js .rv{opacity:0;transform:translateY(16px)} .js .rv.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} .js .rv{opacity:1;transform:none} } @media print{.hdr,.ftr,.burger,.hero-deco{display:none}body{background:#fff}} /* ============================================================================ 20. SCRITTOR LAYER — closer match to the reference design. Measured from the live page: badge #2eaedb 24px/500/.5px, button #2550aa 14px/500/.5px padding 16px 30px radius 0, h2 36px/700/1.3, heading ink #101218, body #494b51, panels #f9f9f9 / #eef2fb. ========================================================================== */ :root{ --sky:#227fa0; --sky-tint:#2eaedb; --sky-deep:#1b6982; --wash-1:#eef4fd; --wash-2:#fdf1f4; } /* 20.1 buttons — exact reference metrics */ .btn{padding:16px 30px;font-size:14px;font-weight:500;letter-spacing:.5px;border-width:0} .btn-s{border-width:2px} .nav .btn{padding:12px 24px;font-size:13px} /* 20.2 section badge — the solid sky-blue square label */ .sec-badge{ display:inline-flex;align-items:center;justify-content:center; background:var(--sky);color:#fff;font-size:clamp(16px,2.2vw,24px);font-weight:500; letter-spacing:.5px;text-transform:uppercase;padding:16px 30px;line-height:1; border-radius:0;margin-bottom:26px; } .sec-badge.blue{background:var(--blue)} .sec-badge.orange{background:var(--orange)} /* 20.3 hero — full-bleed art, everything centred, light display weight */ .hero-shot{ position:relative;isolation:isolate;color:#fff;text-align:center; padding-block:clamp(70px,10vw,132px) clamp(150px,16vw,210px); background: radial-gradient(1100px 620px at 50% -12%, rgba(126,167,255,.55), transparent 68%), linear-gradient(160deg,#4569dd 0%,#3253bd 45%,#2550aa 100%); overflow:hidden; } .hero-shot::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:.62; background:url("/assets/img/hero-doodles.svg") center/cover no-repeat; } .hero-shot::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(18,34,92,.10) 0%,rgba(18,34,92,.30) 100%); } .hero-shot .wrap{position:relative;z-index:1;max-width:1040px} .hero-eyebrow{ font-size:clamp(12px,1.5vw,15px);font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:20px; } .hero-shot h1{ font-size:clamp(2.1rem,5.2vw,3.75rem);font-weight:400;line-height:1.4; letter-spacing:-.01em;color:#fff;margin:0; } .hero-shot h2{ font-size:clamp(1.6rem,3.6vw,3rem);font-weight:500;line-height:1.3; color:#fff;margin-top:6px;letter-spacing:-.015em; } .hero-note{ font-style:italic;font-size:clamp(1rem,1.6vw,1.18rem);color:rgba(255,255,255,.9); margin-top:22px; } .hero-shot .btn-row{justify-content:center;margin-top:34px} .hero-shot .hero-trust{justify-content:center;margin-top:30px} /* 20.4 the white panel that rides up over the hero art */ .overlap{ position:relative;z-index:3;background:#fff;margin-top:clamp(-170px,-14vw,-110px); padding:clamp(24px,3.4vw,34px);box-shadow:0 24px 70px -30px rgba(16,18,24,.35); } .overlap-wrap{padding-inline:clamp(16px,4vw,45px)} /* 20.5 the step rail — square icon tile + vertical connector */ .wash{background:linear-gradient(180deg,var(--wash-1) 0%,#fff 38%,var(--wash-2) 100%)} .rail{--railpad:clamp(0px,6vw,76px);position:relative;padding-left:var(--railpad)} .rail::before{ content:"";position:absolute;left:calc(var(--railpad) + 36px);top:36px;bottom:0;width:1px; background:var(--blue-bright);opacity:.55; } .step{position:relative;padding-bottom:clamp(48px,7vw,86px)} .step-head{display:grid;grid-template-columns:72px minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:start} .step-ic{ width:72px;height:72px;background:var(--blue);color:#fff;display:grid;place-items:center; border-radius:0;flex:none;position:relative;z-index:2; } .step-ic .ic{width:32px;height:32px} .step-kicker{font-size:clamp(15px,1.6vw,18px);font-weight:700;color:var(--blue);line-height:1.2;margin-bottom:10px} .step-head h2{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:700;line-height:1.22;color:var(--ink)} @media(max-width:760px){ .rail{padding-left:0} .rail::before{display:none} .step-head{grid-template-columns:1fr;gap:16px} .step-ic{width:60px;height:60px} } /* 20.6 the white feature card that hangs off each step */ .feat{ background:#fff;border-radius:var(--r-lg);box-shadow:0 18px 50px -26px rgba(16,18,24,.3); padding:clamp(24px,3.4vw,44px);margin-top:clamp(22px,3vw,34px); margin-left:clamp(0px,6vw,104px); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3.6vw,44px);align-items:center; } .feat-kicker{font-size:15px;font-weight:700;color:var(--orange-text);letter-spacing:.01em;margin-bottom:10px} .feat h3{font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:700;color:var(--blue);line-height:1.24} .feat .btn{margin-top:26px} @media(max-width:900px){.feat{grid-template-columns:1fr;margin-left:0}} /* plus-rows: the pale stacked list on the left of a feature card */ .plus-rows{margin-top:22px;border-top:1px solid var(--line-2)} .plus-rows li{ display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start; background:#f7f7f7;border-bottom:1px solid #fff;padding:18px 20px; font-size:clamp(.98rem,1.3vw,1.06rem);font-weight:600;color:var(--ink);line-height:1.45; } .plus-rows li::before{content:"+";color:var(--ink-3);font-weight:500;line-height:1.45} /* check-rows: blue disc ticks */ .check-rows{margin-top:22px} .check-rows li{ display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start; padding:11px 0;font-size:clamp(.98rem,1.3vw,1.06rem);font-weight:600;color:var(--ink);line-height:1.45; } .check-rows .disc{ width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff; display:grid;place-items:center;margin-top:1px; } .check-rows .disc .ic{width:14px;height:14px;stroke-width:3} /* 20.7 tab panel spacing to match the reference proportions */ .tabs{grid-template-columns:minmax(0,246px) minmax(0,1fr);gap:clamp(18px,2.6vw,34px)} .tablist label{border-radius:0;padding:26px 16px} .panes>.pane{border:0;padding:0 0 0 clamp(0px,2vw,24px)} @media(max-width:860px){.panes>.pane{padding-left:0}} /* 20.8 the site-wide heading scale nudged to the reference */ .d2{font-size:clamp(1.75rem,3.6vw,2.25rem);line-height:1.3} .d3{font-size:clamp(1.3rem,2.2vw,1.75rem)} /* 20.9 feature art — pure markup mini-UIs, no image requests */ .art{background:#eef4fd;border-radius:10px;padding:clamp(14px,2vw,22px);overflow:hidden} .art-win{background:#fff;border-radius:8px;box-shadow:0 10px 30px -14px rgba(16,18,24,.3);overflow:hidden} .art-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#f4f7fd;border-bottom:1px solid var(--line)} .art-bar i{width:8px;height:8px;border-radius:50%;background:#c9d0dd;display:block} .art-bar span{margin-left:8px;font-size:.62rem;color:var(--ink-3);background:#fff;border:1px solid var(--line); border-radius:20px;padding:3px 10px;font-weight:500} .art-body{padding:12px} .serp{display:grid;gap:8px} .serp li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center; background:#f7f9fd;border-radius:5px;padding:9px 11px} .serp b{font-size:.66rem;font-weight:700;color:#fff;background:var(--blue);border-radius:3px; display:grid;place-items:center;height:20px} .serp u{display:block;height:7px;border-radius:4px;background:#dbe3f3;text-decoration:none} .serp u+u{margin-top:5px;width:62%} .serp em{font-style:normal;font-size:.6rem;font-weight:700;color:#1f6b3a;background:#e7f4ec; border-radius:3px;padding:2px 6px;white-space:nowrap} .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .tiles div{background:#f7f9fd;border-radius:6px;padding:11px 10px;text-align:center} .tiles b{display:block;font-size:.98rem;font-weight:700;color:var(--ink);letter-spacing:-.02em} .tiles span{display:block;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:4px;font-weight:600} .gauge{display:grid;place-items:center;padding:6px 0 12px} .gauge i{width:112px;height:112px;border-radius:50%;display:grid;place-items:center; background:conic-gradient(#1f6b3a 0 97%,#e4e8f0 97% 100%)} .gauge i::after{content:"97";width:86px;height:86px;border-radius:50%;background:#fff;display:grid; place-items:center;font-size:1.6rem;font-weight:700;color:var(--ink);font-style:normal;letter-spacing:-.03em} .gauge span{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:9px} .bars{display:flex;align-items:flex-end;gap:5px;height:78px;margin-top:10px} .bars b{flex:1;background:var(--blue-bright);border-radius:2px 2px 0 0;display:block} .bars b:nth-child(n+7){background:var(--blue)} /* 20.10 inner-page hero — same display rhythm as the home hero */ .hero-band h1{font-weight:400;line-height:1.28} .hero-band .eyebrow{letter-spacing:.2em} /* 20.11 mobile — re-assert the stacked layouts after the section-20 overrides */ @media(max-width:860px){ .tabs{grid-template-columns:1fr} .tablist label{padding:14px 18px} } @media(max-width:620px){ .overlap{margin-top:-90px;padding:20px 14px} .overlap-wrap{padding-inline:14px} .sec-badge{font-size:15px;padding:13px 22px} .hero-shot{padding-block:64px 130px} .hero-shot .btn-row .btn{width:100%} } /* 20.12 contrast fixes — white text needs 4.5:1, so the AA-safe orange carries words; decorative uses keep the vivid original. */ :root{ --orange-btn:#d23600; --cta-btn:#2200dd; --cta-btn-hover:#1a00ad; } /* The primary CTA is electric blue. It sits on the #2550aa header, so it also carries a light hairline - without one the button edge disappears into the bar (1.3:1 against it, well under the 3:1 a UI boundary needs). */ .btn-a,.hdr .btn-p{background:var(--cta-btn);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)} .btn-a:hover,.hdr .btn-p:hover{background:var(--cta-btn-hover);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62)} .serp li:first-child b{background:var(--orange-btn)} /* ============================================================================ 21. MOBILE DRAWER — modelled on the Scrittor flyout menu. Their markup: