/* ============================================================================ SKOOLY — MARKETING SITE DESIGN SYSTEM skooly.pk · built on the Skooly Brand Kit v2 token set ---------------------------------------------------------------------------- Namespace: every class is prefixed `sky-` so nothing here can collide with Bootstrap 5 (still loaded for the registration modal) or with the `sk-` application UI kit in skooly-tokens.css. Load order: bootstrap.min.css -> skooly-tokens.css -> THIS FILE. ============================================================================ */ /* ---------------------------------------------------------------- fonts --- */ /* Self-hosted, latin-subset VARIABLE woff2 — two files, one request each, no third-party font call, which matters on Pakistani mobile networks. Plus Jakarta Sans = display/headings. Manrope = UI and body. The v1 static webfont files stay on disk but are no longer referenced. */ @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500 800;font-display:swap; src:url('../fonts/jakarta-var-latin.woff2') format('woff2');} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap; src:url('../fonts/manrope-var-latin.woff2') format('woff2');} /* --------------------------------------------------------------- tokens --- */ /* Skooly Brand Kit v2. Token NAMES are unchanged from v1 so the ~256 existing rules keep working; only the values are retargeted to the new brand. */ :root{ /* Brand core — Skooly Brand Kit v2 */ --sky-navy:#0A1B45; --sky-blue:#1B7FF5; /* brand blue — large areas, fills, strokes */ --sky-blue-700:#0F68D0; /* primary action + link/accent TEXT on white */ --sky-blue-800:#0B52A6; /* small accent text that must clear AA comfortably */ --sky-green:#0FBEA6; /* teal ribbon */ --sky-amber:#FFB623; /* gold ribbon */ --sky-red:#FF5D52; /* coral ribbon */ /* Navy depth ladder for dark sections */ --sky-navy-1:#0A1B45; --sky-navy-2:#0F2450; --sky-navy-3:#1B2B4E; --sky-navy-4:#2C3D63; --sky-navy-line:rgba(255,255,255,.12); /* Light surfaces */ --sky-white:#FFFFFF; --sky-surface:#F6F8FC; /* canvas */ --sky-surface-2:#EEF3FA; /* alt surface */ --sky-line:#E4EAF3; /* hairline between blocks (decorative) */ --sky-line-soft:#EEF3FA; --sky-line-strong:#CFD9E8; /* decorative only — see the 3:1 rule below */ --sky-line-ui:#7B8AA6; /* borders of INTERACTIVE controls. [A11Y OVERRIDE] the kit's #93A2BD measures 2.58:1 on white and misses WCAG 1.4.11; #7B8AA6 is 3.48:1 on white and 3.28:1 on --sky-surface. */ /* Ink — every value below is AA-verified, do NOT substitute the kit's #8A97AC for text */ --sky-ink:#0A1B45; /* 16.7:1 on white */ --sky-ink-2:#4A5975; /* 7.05:1 on white */ --sky-ink-3:#5F6E8C; /* 5.13:1 on white, 4.82:1 on canvas — muted TEXT */ --sky-ink-4:#8A97AC; /* DECORATIVE ONLY — rules, dividers, disabled glyphs. NEVER text. */ --sky-ink-inv:#FFFFFF; --sky-ink-inv-2:#CBD5E8; /* 11.3:1 on navy */ --sky-ink-inv-3:#A9BDDE; /* 8.8:1 on navy */ /* Accent text colours — the ONLY values allowed for coloured text on white/canvas */ --sky-blue-t:#0B52A6; /* 7.58:1 */ --sky-green-t:#0A7B6C; /* 5.17:1 */ --sky-amber-t:#85560A; /* gold-800 */ --sky-red-t:#B92C23; /* 6.09:1 */ /* Tints */ --sky-blue-50:#EAF3FE; --sky-blue-100:#D2E7FD; --sky-green-50:#E6FAF6; --sky-green-100:#C4F3EA; --sky-amber-50:#FFF6E3; --sky-amber-100:#FFEBBF; --sky-red-50:#FFF0EF; --sky-red-100:#FFDCD9; /* Radius — the kit's scale. Nothing on the page may exceed --sky-r-lg except pills. */ --sky-r-sm:6px; --sky-r:10px; --sky-r-lg:16px; --sky-r-xl:16px; --sky-r-2xl:16px; --sky-r-full:999px; /* Elevation — restrained; structure is drawn with 1px rules, shadow only lifts */ --sky-sh-1:0 1px 2px rgba(10,27,69,.08); --sky-sh-2:0 4px 14px rgba(10,27,69,.06); --sky-sh-3:0 24px 48px rgba(10,27,69,.16); --sky-sh-4:0 30px 70px rgba(10,27,69,.12); /* Rhythm — unchanged */ --sky-gut:clamp(20px,5vw,40px); --sky-max:1200px; --sky-max-narrow:760px; --sky-max-prose:74ch; /* reading measure for article/legal body copy */ /* Plate series. --sky-accent is the GRAPHIC accent (marks, rules >=2px) and is never used for text; --sky-accent-t is the text-safe pair. Both are pinned back to blue inside any data-drawing by the gate further down, so COLOUR LAW 3 is enforced by the cascade rather than by review discipline. */ --sky-accent:var(--sky-blue); --sky-accent-t:var(--sky-blue-t); --sky-chev-1:8px; /* chevron at label scale — eyebrow, plate caption */ --sky-chev-3:20px; /* chevron at page scale — the closing mark */ --sky-sect:clamp(72px,10vw,132px); /* Type */ --sky-font:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif; --sky-font-display:'Plus Jakarta Sans','Manrope',system-ui,-apple-system,sans-serif; --sky-ease:cubic-bezier(.22,.61,.36,1); /* --- additions (kit values the contract block does not name) ------------ */ --sky-surface-3:#F9FBFE; /* tinted card footer strip / table header row */ --sky-navy-panel:#12285C; /* raised, FLAT panel inside a navy band */ --sky-blue-300:#A8CFFA; /* blue tints, kit ramp */ --sky-blue-400:#74B2F8; --sky-green-700:#0A7B6C; /* == --sky-green-t; kept, it has existing callers */ --sky-green-400:#4ADBC3; /* teal-400 — the free-tier figure ON navy (9.7:1) */ --sky-blue-inv:#7FB4F9; /* the one accent blue that is legible ON navy (7.8:1). Replaces the 12 untokenised light-blue sites. */ --sky-navy-ui:#6B7EA6; /* border of an INTERACTIVE control on navy. [A11Y OVERRIDE] the kit draws #3C5183 = 2.15:1 on --sky-navy; navy-400 is 4.11:1 and holds the same role. */ } /* ----------------------------------------------------------------- base --- */ .sky{ font-family:var(--sky-font); font-weight:500; line-height:1.625; color:var(--sky-ink); background:var(--sky-white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; } .sky *,.sky *::before,.sky *::after{box-sizing:border-box;} /* EVERY element-level default in this file is wrapped in :where() so it weighs (0,0,0). Written bare (`.sky p`) it weighs (0,1,1) and silently beats every `.sky-*` component rule — which is how this file previously lost every lead paragraph's margin, every heading's tracking and every button's border. */ :where(.sky) :where(img,svg){max-width:100%;} :where(.sky) :where(p){margin:0;} :where(.sky) :where(h1,h2,h3,h4,h5,h6){ margin:0;font-family:var(--sky-font-display);font-weight:700; letter-spacing:-.02em;line-height:1.2;text-wrap:pretty; } :where(.sky) :where(ul){margin:0;padding:0;list-style:none;} /* :where() keeps this at specificity (0,1,0). Written as `.sky a` it is (0,1,1) and beats every single-class component rule below — which rendered the nav, drawer and login links navy-on-navy, i.e. invisible until hover. */ .sky :where(a){color:inherit;text-decoration:none;} /* Accessible focus ring, consistent everywhere */ .sky a:focus-visible,.sky button:focus-visible,.sky input:focus-visible, .sky textarea:focus-visible,.sky select:focus-visible,.sky summary:focus-visible, .sky [tabindex]:focus-visible,.sky [href]:focus-visible,.sky details:focus-visible{ outline:2px solid var(--sky-blue); outline-offset:2px; /* No border-radius here. It used to force every focused element to 6px, visibly reshaping pills and square cells on focus. Browsers draw the outline around the element's own radius already. */ } /* Skip link. Hidden by clipping, NOT by left:-9999px — a physical `left` puts the element 9999px outside the viewport on the RIGHT in RTL, which extended documentElement.scrollWidth by exactly 9999px and gave the whole page a horizontal scrollbar in Urdu. Clipping costs no layout in either direction. */ .sky-skip{ position:absolute;inset-inline-start:0;top:0;z-index:200; width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; background:var(--sky-blue-700);color:var(--sky-ink-inv);padding:12px 20px; border-radius:0 0 var(--sky-r) 0; font-weight:700;font-size:14px; } .sky-skip:focus{width:auto;height:auto;overflow:visible;clip-path:none;} .sky-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ------------------------------------------------------------- layout ----- */ .sky-wrap{width:100%;max-width:var(--sky-max);margin:0 auto;padding-inline:var(--sky-gut);} .sky-sect{padding-block:var(--sky-sect);} .sky-sect--tight{padding-block:clamp(52px,7vw,86px);} .sky-dark{background:var(--sky-navy);color:var(--sky-ink-inv);} .sky-soft{background:var(--sky-surface);border-top:1px solid var(--sky-line);} .sky-rule{height:1px;background:var(--sky-line);border:0;margin:0;} /* Section header — editorial, numbered, echoes the brand guidelines doc */ .sky-head{max-width:var(--sky-max-narrow);} .sky-head--center{margin-inline:auto;text-align:center;} .sky-eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:var(--sky-blue-t);margin-bottom:18px; } /* THE CHEVRON — the logo's mark, at label scale, and now actually a chevron. This was a 22x2px horizontal BAR for the whole life of the file, directly under a comment claiming it was the mark: the most-repeated element on the site rendered as the generic blue dash every marketing template ships. Border-drawn, so it needs no asset, no data URI, no mask and no @supports fallback, and it takes currentColor — which is why the .sky-dark companion that used to follow was DELETED rather than updated: it painted a rotated navy square behind the strokes, and currentColor already resolves correctly on navy via .sky-dark .sky-eyebrow. border-top + border-right are PHYSICAL ON PURPOSE: an up-apex is mirror-symmetric and must not flip in RTL. */ .sky-eyebrow::before{ content:"";flex:none; width:var(--sky-chev-1);height:var(--sky-chev-1); background:none;border-radius:0; border-top:2px solid currentColor; border-right:2px solid currentColor; border-top-right-radius:2px; transform:rotate(-45deg) translateY(1px); /* optical centring on the cap line */ margin-inline-end:2px; /* the rotated box overhangs ~1.5px */ } .sky-eyebrow--center{justify-content:center;} .sky-dark .sky-eyebrow{color:var(--sky-blue-inv);} .sky-h2{font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.14;font-weight:700;letter-spacing:-.03em;} .sky-h3{font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.286;font-weight:700;letter-spacing:-.02em;} .sky-lead{ font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.667;color:var(--sky-ink-2); margin-top:20px;max-width:62ch;font-weight:500;text-wrap:pretty; } .sky-head--center .sky-lead{margin-inline:auto;} .sky-dark .sky-lead{color:var(--sky-ink-inv-2);} /* Display face on the few non-heading elements that carry display type. */ .sky-plan__amt,.sky-est__total,.sky-metric__v,.sky-terms__v,.sky-empty__t, .sky-proof__item,.sky-logo__w{font-family:var(--sky-font-display);} /* ---------------------------------------------------------------- buttons - */ /* Kit button: Manrope 700, flat fill, 1px lift at rest — no gradient sheen, no coloured glow, no hover translate. Structure comes from the border. */ .sky-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--sky-font);font-size:15px;font-weight:700;line-height:1; padding:14px 22px;border-radius:var(--sky-r);border:1.5px solid transparent; cursor:pointer;white-space:nowrap;text-align:center; transition:background .18s var(--sky-ease),border-color .18s,box-shadow .18s,color .18s; } .sky-btn:active{transform:translateY(1px);} /* #1B7FF5 is 3.4:1 behind white text and fails — the action fill is blue-700. */ .sky-btn--primary{background:var(--sky-blue-700);color:var(--sky-ink-inv);box-shadow:0 1px 2px rgba(10,27,69,.18);} .sky-btn--primary:hover{background:var(--sky-blue-t);color:var(--sky-ink-inv);box-shadow:0 2px 6px rgba(10,27,69,.18);} .sky-btn--primary:active{background:#093F80;box-shadow:0 1px 2px rgba(10,27,69,.18);} .sky-btn--ghost{background:var(--sky-white);color:var(--sky-ink);border-color:var(--sky-line-ui);} .sky-btn--ghost:hover{background:var(--sky-surface);border-color:var(--sky-ink-3);color:var(--sky-ink);} .sky-btn--ghost:active{background:var(--sky-surface-2);} .sky-btn--onNavy{background:transparent;color:var(--sky-ink-inv);border-color:var(--sky-navy-ui);} .sky-btn--onNavy:hover{background:rgba(255,255,255,.08);color:var(--sky-ink-inv);border-color:var(--sky-ink-inv-3);} /* The hero's second CTA still carries .sky-btn--onNavy (markup is not ours to rename) but the hero is a white ground now, so it takes the ghost treatment: kit 13 draws it #FFFFFF / #0A1B45 / 1.5px #CFD9E8. --sky-line-ui is used instead of #CFD9E8 because a control border must clear 3:1 (WCAG 1.4.11). */ .sky-hero .sky-btn--onNavy{background:var(--sky-white);color:var(--sky-ink);border-color:var(--sky-line-ui);} .sky-hero .sky-btn--onNavy:hover{background:var(--sky-surface);color:var(--sky-ink);border-color:var(--sky-ink-3);} .sky-hero .sky-btn--onNavy:active{background:var(--sky-surface-2);} /* On a navy ground the #0F68D0 fill is only 2.82:1 against --sky-navy-2 and 3.12:1 against --sky-navy, so the control's own edge has to be drawn. --sky-blue-inv is 7.06:1 on --sky-navy-2. (The fill itself cannot be raised to --sky-blue: that would drop the white label to 3.90:1.) */ .sky-dark .sky-btn--primary,.sky-cta .sky-btn--primary, .sky-est .sky-btn--primary,.sky-glass .sky-btn--primary{border-color:var(--sky-blue-inv);} .sky-btn--white{background:var(--sky-white);color:var(--sky-navy);} .sky-btn--white:hover{background:var(--sky-surface-2);color:var(--sky-navy);} .sky-btn--white:active{background:var(--sky-ink-inv-2);} .sky-btn--lg{padding:16px 26px;font-size:16px;border-radius:11px;} .sky-btn--sm{padding:9px 16px;font-size:13px;border-radius:8px;} .sky-btn--block{width:100%;} .sky-btn__arrow{transition:transform .2s var(--sky-ease);} .sky-btn:hover .sky-btn__arrow{transform:translateX(3px);} /* Text link with animated underline */ .sky-link{ display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15px; color:var(--sky-blue-700);position:relative; } .sky-link::after{ content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px; background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .25s var(--sky-ease); } .sky-link:hover{color:var(--sky-blue-t);} .sky-link:hover::after{transform:scaleX(1);} /* ------------------------------------------------------------------- nav -- */ /* WHITE, not navy. The kit's own site artboard ("13 Website") draws the nav row on #FFFFFF with a #EEF3FA hairline under it — inverting the top of the page from navy to white is the single most visible move of the rebrand, so the navy is spent once, at the bottom (.sky-cta + .sky-foot), and nowhere else. */ .sky-nav{ position:sticky;top:0;z-index:60; background:var(--sky-white);color:var(--sky-ink); border-bottom:1px solid var(--sky-line-soft); transition:background .3s var(--sky-ease),border-color .3s,box-shadow .3s; } /* Flat, not frosted — the kit has no glass. The stuck state is a hairline + a lift. */ .sky-nav.is-stuck{ background:var(--sky-white); border-bottom-color:var(--sky-line); box-shadow:var(--sky-sh-1); } .sky-nav__in{display:flex;align-items:center;gap:20px;height:76px;} .sky-nav__brand{display:flex;align-items:center;flex:none;margin-inline-end:auto;} /* The HTML lockup. skooly-primary*.svg sets the wordmark as live text, so it renders wrong without the font — on the site the mark is an and the word is real text, exactly as the kit's own website artboard does. */ .sky-logo{display:inline-flex;align-items:center;gap:11px;color:inherit;} .sky-logo__m{display:block;width:36px;height:36px;flex:none;} .sky-logo__w{ font-family:var(--sky-font-display);font-weight:800;font-size:25px; letter-spacing:-.042em;line-height:1;color:currentColor; } /* On navy the mark is the reversed SVG and the word resolves to #FFFFFF. */ /* Navy grounds only. The nav is white now, so its lockup inherits --sky-ink. */ .sky-drawer .sky-logo,.sky-foot .sky-logo, .sky-dark .sky-logo,.sky-cta .sky-logo{color:var(--sky-ink-inv);} .sky-nav .sky-logo{color:var(--sky-ink);} .sky-foot .sky-logo__m{width:28px;height:28px;} .sky-foot .sky-logo__w{font-size:19px;} .sky-drawer .sky-logo__m{width:30px;height:30px;} .sky-drawer .sky-logo__w{font-size:21px;} .sky-nav__menu{display:none;align-items:center;gap:4px;} /* Kit 13 sets the nav links at 14.5/600 in #3D4C6B; --sky-ink-2 (#4A5975) is the token nearest that value and is AA-verified at 7.05:1 on white. */ .sky-nav__link{ position:relative;font-size:14.5px;font-weight:600;color:var(--sky-ink-2); padding:10px 14px;border-radius:var(--sky-r-sm);transition:color .18s,background .18s; } .sky-nav__link:hover{color:var(--sky-ink);background:var(--sky-surface-2);} .sky-nav__actions{display:none;align-items:center;gap:10px;flex:none;} .sky-nav__login{font-size:14.5px;font-weight:700;color:var(--sky-ink);padding:10px 8px;} .sky-nav__login:hover{color:var(--sky-blue-700);} /* The nav CTA runs at the kit's --nav size (14px / 11px 18px / radius 9px). */ /* 12px padding measured 43px tall, just under the 44px target floor (2.5.8). */ .sky-nav__actions .sky-btn{padding:13px 18px;font-size:14px;border-radius:9px;} /* Mobile drawer — own implementation, no Bootstrap offcanvas dependency */ /* On the white nav: --sky-line-ui is the 3:1 interactive-control border. */ .sky-burger{ display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:46px;height:46px;padding:0 11px;flex:none; background:var(--sky-white);border:1px solid var(--sky-line-ui); border-radius:var(--sky-r-sm);cursor:pointer; } .sky-burger:hover{background:var(--sky-surface-2);} .sky-burger span{display:block;height:2px;width:100%;background:var(--sky-ink);border-radius:2px; transition:transform .28s var(--sky-ease),opacity .2s;} .sky-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .sky-burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .sky-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .sky-drawer{ position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none; } .sky-drawer[data-open="true"]{visibility:visible;pointer-events:auto;} .sky-drawer__scrim{ position:absolute;inset:0;background:rgba(10,27,69,.62);opacity:0; transition:opacity .3s var(--sky-ease); } .sky-drawer[data-open="true"] .sky-drawer__scrim{opacity:1;} .sky-drawer__panel{ position:absolute;inset-block:0;inset-inline-end:0;width:min(92vw,380px); background:var(--sky-navy);border-inline-start:1px solid var(--sky-navy-line); padding:22px;display:flex;flex-direction:column;gap:6px;overflow-y:auto; transform:translateX(100%);transition:transform .34s var(--sky-ease); } [dir="rtl"] .sky-drawer__panel{transform:translateX(-100%);} .sky-drawer[data-open="true"] .sky-drawer__panel{transform:translateX(0);} .sky-drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;} .sky-drawer__close{ width:42px;height:42px;border-radius:var(--sky-r-sm);flex:none; background:rgba(255,255,255,.07);border:1px solid var(--sky-navy-ui);color:var(--sky-ink-inv); font-size:20px;line-height:1;cursor:pointer; } .sky-drawer__link{ display:block;padding:15px 14px;border-radius:var(--sky-r); font-size:16px;font-weight:600;color:var(--sky-ink-inv-2); border-bottom:1px solid var(--sky-navy-line); } .sky-drawer__link:hover{color:#fff;background:rgba(255,255,255,.05);} .sky-drawer__foot{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:10px;} /* ------------------------------------------------------------------ hero -- */ /* WHITE. Kit "13 Website" draws the hero as padding:76px 44px 0 on #FFFFFF: a tinted chevron ribbon, a bordered product card, one navy chip. The navy is spent once, at the end of the page, not used as wallpaper at the top. */ .sky-hero{ position:relative;background:var(--sky-white);color:var(--sky-ink);overflow:hidden; padding-block:clamp(56px,8vw,96px) clamp(72px,9vw,110px); } /* v1's two radial washes and the masked grid texture are gone. The only thing decorative in Skooly is the logo's chevron, repeated — see .sky-ribbon. */ .sky-hero__in{position:relative;z-index:1;display:grid;gap:clamp(44px,5vw,64px);} .sky-hero__copy{max-width:620px;} /* Kit "13 Website": Jakarta 800, 62/1.02, -4.2%. */ .sky-hero__title{ font-size:clamp(2.375rem,5.4vw,3.875rem);line-height:1.02;letter-spacing:-.042em;font-weight:800; } .sky-hero__title em{font-style:normal;color:var(--sky-blue-700);} .sky-hero__sub{ margin-top:24px;font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.65; color:var(--sky-ink-2);font-weight:500;max-width:54ch;text-wrap:pretty; } /* Kit §7.2: the hero eyebrow is a filled tint PILL, not a dashed rule. */ .sky-hero .sky-eyebrow{ align-self:flex-start;background:var(--sky-blue-50);color:var(--sky-blue-t); font-size:13px;font-weight:700;letter-spacing:0;text-transform:none; padding:7px 14px;border-radius:var(--sky-r-full); } .sky-hero .sky-eyebrow::before{display:none;} .sky-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;} .sky-hero__note{ margin-top:20px;font-size:13.5px;color:var(--sky-ink-3); display:flex;align-items:center;gap:9px;flex-wrap:wrap; } .sky-hero__note b{color:var(--sky-ink);font-weight:700;} .sky-dot{width:5px;height:5px;border-radius:50%;background:var(--sky-green);flex:none;} /* Hero metric strip */ .sky-hero__stats{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; margin-top:42px;padding-top:30px;border-top:1px solid var(--sky-line);max-width:520px; } .sky-metric__v{font-weight:800;line-height:1.1;letter-spacing:-.02em;} .sky-metric__l{margin-top:7px;font-size:12.5px;color:var(--sky-ink-3);line-height:1.4;} /* ---------------------------------------------- product mockup primitives - */ /* A real UI rendered in CSS — no stock screenshots, no fake browser clichés. */ /* The product frame is a photographic object, not a UI surface — it is the one place the kit still spends a big shadow (kit 12/13: 0 30px 70px). */ .sky-frame{ border-radius:var(--sky-r-lg);overflow:hidden;background:var(--sky-white); border:1px solid var(--sky-line);box-shadow:var(--sky-sh-4); } .sky-frame--light{border-color:var(--sky-line);box-shadow:var(--sky-sh-4);} .sky-frame__bar{ display:flex;align-items:center;gap:8px;padding:11px 14px; background:var(--sky-surface-2);border-bottom:1px solid var(--sky-line); } /* THE ACCENT LAW. The kit's own artboard paints these coral/gold/teal, but there they are a device frame drawn AROUND the design; here they sit inside a page region that already carries blue, which puts all four ribbon colours in one region for pure decoration. "The four ribbon colours are functional, not decorative... all four together appear ONLY in the logo and the ribbon." So the dots stay one neutral value, as in v1. */ .sky-frame__dots{display:flex;gap:5px;} .sky-frame__dots i{width:9px;height:9px;border-radius:50%;background:var(--sky-line-strong);display:block;} .sky-frame__url{ flex:1;text-align:center;font-size:11.5px;color:var(--sky-ink-3); background:var(--sky-white);border:1px solid var(--sky-line);border-radius:var(--sky-r-full); padding:5px 12px;max-width:280px;margin-inline:auto; } /* App chrome (navy rail + content) */ .sky-app{display:flex;background:var(--sky-surface-2);min-height:0;} .sky-app__rail{ width:172px;flex:none;background:var(--sky-navy);padding:16px 12px; display:flex;flex-direction:column;gap:3px; } .sky-app__brand{display:flex;align-items:center;gap:8px;padding:4px 6px 16px;} .sky-app__brand :where(img){height:26px;} .sky-app__brand span{font-family:var(--sky-font-display);font-weight:800;font-size:15px; color:var(--sky-ink-inv);letter-spacing:-.042em;} .sky-app__nav{ display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--sky-r-sm); font-size:12.5px;font-weight:600;color:var(--sky-ink-inv-2); } .sky-app__nav.is-on{background:var(--sky-blue-700);color:var(--sky-ink-inv);} .sky-app__body{flex:1;min-width:0;padding:16px;display:flex;flex-direction:column;gap:14px;} .sky-app__top{display:flex;align-items:center;gap:10px;} .sky-app__title{font-size:15px;font-weight:700;} .sky-app__chip{ margin-inline-start:auto;font-size:11px;font-weight:700;padding:5px 11px; border-radius:var(--sky-r-sm);background:var(--sky-blue-50);color:var(--sky-blue-t); } /* Stat tiles */ .sky-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;} .sky-tile{background:var(--sky-white);border:1px solid var(--sky-line);border-radius:var(--sky-r); padding:12px 13px;border-top:3px solid var(--sky-blue);} .sky-tile--green{border-top-color:var(--sky-green);} .sky-tile--amber{border-top-color:var(--sky-amber);} .sky-tile--slate{border-top-color:var(--sky-line-strong);} .sky-tile__l{font-size:10.5px;font-weight:600;color:var(--sky-ink-3);letter-spacing:.02em;} .sky-tile__v{font-size:17px;font-weight:800;margin-top:5px;letter-spacing:-.02em;} /* A delta carries words, so it steps down the ramp to the 700 text value. */ .sky-tile__d{font-size:10.5px;color:var(--sky-green-t);margin-top:4px;font-weight:600;} .sky-tile--amber .sky-tile__d{color:var(--sky-amber-t);} .sky-tile--slate .sky-tile__d{color:var(--sky-ink-3);} /* Rows / table-ish list */ .sky-panel{background:var(--sky-white);border:1px solid var(--sky-line);border-radius:var(--sky-r); overflow:hidden;} .sky-panel__h{display:flex;align-items:center;padding:11px 14px;border-bottom:1px solid var(--sky-line); font-size:12.5px;font-weight:800;} .sky-panel__h span{margin-inline-start:auto;font-size:11px;color:var(--sky-blue-t);font-weight:700;} .sky-row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--sky-line-soft); font-size:12px;} .sky-row:last-child{border-bottom:0;} .sky-row__n{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sky-row__m{color:var(--sky-ink-2);flex:none;} /* Status chips. THE ACCENT LAW: teal = paid/present/done, gold = pending/late, coral = overdue/absent, blue = informational. The moment a colour carries words it steps down its ramp to the 700/800 text value. Radius 6, never 999 — a pill shape is reserved for avatars, meters and true pills. */ .sky-pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--sky-r-sm);flex:none; line-height:1.4;} /* Inside a product mockup the chip is part of a PICTURE of the app, not page content, so it keeps the true-to-life small size. Everywhere else the kit's 12px type floor applies. */ .sky-frame .sky-pill,.sky-app .sky-pill,.sky-phone .sky-pill,.sky-mock .sky-pill{font-size:10.5px;} .sky-pill--green{background:var(--sky-green-50);color:var(--sky-green-t);} .sky-pill--amber{background:var(--sky-amber-50);color:var(--sky-amber-t);} .sky-pill--red{background:var(--sky-red-50);color:var(--sky-red-t);} .sky-pill--blue{background:var(--sky-blue-50);color:var(--sky-blue-t);} .sky-pill--navy{background:var(--sky-navy);color:var(--sky-ink-inv);} /* Progress bars */ /* A meter fill is a graphic, so the 500 values are correct here. */ .sky-bar{height:6px;border-radius:var(--sky-r-full);background:var(--sky-surface-2);overflow:hidden;} .sky-bar>span{display:block;height:100%;border-radius:inherit;background:var(--sky-blue); transform-origin:left;} /* No --green/--amber bar variants: under the kit's one-accent-per-region law the attendance bars are a single region, so they all take the default blue. Add a variant back only if a bar starts encoding a STATE rather than a magnitude. */ .sky-bar--red>span{background:var(--sky-red);} /* --------------------------------------------------------------- proof ---- */ .sky-proof{border-block:1px solid var(--sky-line);background:var(--sky-white);} .sky-proof__in{padding-block:34px;display:flex;align-items:center;gap:clamp(20px,4vw,54px);flex-wrap:wrap; justify-content:center;} .sky-proof__label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--sky-ink-3);flex:none;} .sky-proof__items{display:flex;align-items:center;gap:clamp(18px,3.4vw,44px);flex-wrap:wrap; justify-content:center;} .sky-proof__item{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700; letter-spacing:-.01em;color:var(--sky-ink-2);} .sky-proof__item :where(svg){width:17px;height:17px;color:var(--sky-blue-700);flex:none;} /* ------------------------------------------------------------ editorial --- */ /* Problem -> outcome. Asymmetric, rule-separated rows: no card grid. */ .sky-shift{display:grid;gap:0;margin-top:clamp(44px,5vw,64px);border-top:1px solid var(--sky-line);} .sky-shift__row{ display:grid;gap:clamp(14px,3vw,44px);padding-block:clamp(26px,3.4vw,38px); border-bottom:1px solid var(--sky-line);align-items:start; } .sky-shift__from{display:flex;gap:13px;align-items:flex-start;} .sky-shift__x{ width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px; background:var(--sky-red-50);color:var(--sky-red-t);display:grid;place-items:center; font-size:12px;font-weight:800; } .sky-shift__ft{font-size:15px;line-height:1.6;color:var(--sky-ink-3);} .sky-shift__to{display:flex;gap:13px;align-items:flex-start;} .sky-shift__c{ width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px; background:var(--sky-blue-50);color:var(--sky-blue-t);display:grid;place-items:center; font-size:12px;font-weight:800; } .sky-shift__tt{font-size:15.5px;line-height:1.55;font-weight:500;color:var(--sky-ink);} .sky-shift__tt b{font-weight:700;} /* -------------------------------------------------------------- showcase -- */ .sky-tabs{ display:flex;gap:clamp(16px,2.4vw,26px);flex-wrap:wrap;margin-top:34px; border-bottom:1.5px solid var(--sky-line); } .sky-tab{ font-family:var(--sky-font);font-size:15px;font-weight:600;line-height:1.2; color:var(--sky-ink-3);background:none;cursor:pointer; padding:13px 2px 12px;border:0;border-bottom:2.5px solid transparent; border-radius:0;margin-bottom:-1.5px; transition:color .2s var(--sky-ease),border-color .2s; } .sky-tab:hover{color:var(--sky-ink);} /* Not colour alone: the selected tab is also 700 and full-ink. */ .sky-tab[aria-selected="true"]{ background:none;color:var(--sky-ink);font-weight:700;border-bottom-color:var(--sky-blue); } .sky-panes{margin-top:26px;position:relative;} .sky-pane[hidden]{display:none;} .sky-pane{animation:skyFade .4s var(--sky-ease);} @keyframes skyFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} .sky-pane__grid{display:grid;gap:clamp(24px,3.6vw,48px);align-items:center;} .sky-pane__pts{display:flex;flex-direction:column;gap:16px;margin-top:24px;} .sky-pt{display:flex;gap:12px;align-items:flex-start;} .sky-pt :where(svg){width:19px;height:19px;color:var(--sky-blue-700);flex:none;margin-top:2px;} .sky-pt b{display:block;font-size:15px;font-weight:700;margin-bottom:3px;} .sky-pt span{font-size:14.5px;line-height:1.6;color:var(--sky-ink-2);} /* ---------------------------------------------------------------- roles --- */ /* Deliberately asymmetric: one lead card + stacked secondary rows. */ .sky-roles{display:grid;gap:18px;margin-top:clamp(40px,5vw,58px);} .sky-role{ background:var(--sky-white);border:1px solid var(--sky-line);border-radius:var(--sky-r-lg); padding:clamp(22px,2.6vw,30px); } .sky-role:hover{border-color:var(--sky-line-strong);box-shadow:var(--sky-sh-2);} .sky-role--lead{background:var(--sky-navy);border-color:var(--sky-navy);color:var(--sky-ink-inv);} .sky-role--lead:hover{border-color:var(--sky-navy);box-shadow:var(--sky-sh-3);} .sky-role__tag{ display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800; letter-spacing:.14em;text-transform:uppercase; color:var(--sky-blue-t);background:var(--sky-blue-50);padding:5px 11px;border-radius:var(--sky-r-sm); } .sky-role--lead .sky-role__tag{background:rgba(127,180,249,.16);color:var(--sky-blue-inv);} .sky-role__t{font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:700;margin-top:16px;letter-spacing:-.02em;} .sky-role__d{font-size:14.5px;line-height:1.65;color:var(--sky-ink-2);margin-top:10px;} .sky-role--lead .sky-role__d{color:var(--sky-ink-inv-2);} .sky-role__list{margin-top:18px;display:flex;flex-direction:column;gap:9px;} .sky-role__list :where(li){display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55; color:var(--sky-ink-2);} .sky-role--lead .sky-role__list li{color:var(--sky-ink-inv-2);} .sky-role__list :where(svg){width:16px;height:16px;flex:none;margin-top:2px;color:var(--sky-green-t);} .sky-role--lead .sky-role__list svg{color:var(--sky-green-100);} /* ------------------------------------------------------------ live demo -- */ /* Three equal role cards. Unlike .sky-roles there is no lead card here — no single role is the "right" way in, so they carry equal weight. */ .sky-demo{display:grid;gap:18px;margin-top:clamp(40px,5vw,58px);} .sky-demo .sky-role{display:flex;flex-direction:column;} .sky-demo .sky-role__tag{align-self:flex-start;} /* Pins the button to the bottom so uneven copy lengths still line up. */ .sky-demo__go{margin-top:auto;padding-top:14px;} .sky-demo .sky-role__d{margin-bottom:22px;} .sky-demo__note{ margin-top:clamp(24px,3vw,32px);padding:clamp(18px,2.4vw,24px); background:var(--sky-white);border:1px solid var(--sky-line);border-radius:var(--sky-r-lg); } .sky-demo__note :where(p){font-size:14.5px;line-height:1.7;color:var(--sky-ink-2);} .sky-demo__note code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px; background:var(--sky-blue-50);color:var(--sky-blue-t);padding:2px 7px; border-radius:var(--sky-r-sm);white-space:normal;overflow-wrap:anywhere; } .sky-demo__reset{margin-top:10px;font-size:13.5px;color:var(--sky-ink-3);} @media (min-width:900px){ .sky-demo{grid-template-columns:repeat(3,minmax(0,1fr));} } /* -------------------------------------------------------------- workflow -- */ .sky-flow{display:grid;gap:0;margin-top:clamp(40px,5vw,58px);counter-reset:sky-step;} .sky-step{ display:grid;gap:clamp(12px,2.6vw,38px);padding-block:clamp(26px,3.2vw,36px); border-top:1px solid var(--sky-line);align-items:start; } .sky-step:last-child{border-bottom:1px solid var(--sky-line);} .sky-step__n{ font-size:13px;font-weight:800;color:var(--sky-blue-t);letter-spacing:.1em; display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums; } .sky-step__n::after{content:"";flex:1;height:1px;background:var(--sky-line);} .sky-step__t{font-size:clamp(1.125rem,1.6vw,1.3125rem);font-weight:700;letter-spacing:-.02em;} .sky-step__d{font-size:14.5px;line-height:1.65;color:var(--sky-ink-2);margin-top:9px;max-width:56ch;} .sky-step__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;} .sky-chip{ font-size:12px;font-weight:600;color:var(--sky-ink-2);background:var(--sky-surface); border:1px solid var(--sky-line);padding:5px 11px;border-radius:var(--sky-r-full); } /* ---------------------------------------------------------------- mobile -- */ .sky-phone{ width:262px;flex:none;border-radius:30px;padding:11px;background:var(--sky-navy); border:1px solid var(--sky-navy-4);box-shadow:var(--sky-sh-4);position:relative; } .sky-phone::before{ content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%); width:76px;height:6px;border-radius:var(--sky-r-full);background:rgba(255,255,255,.18);z-index:2; } .sky-phone__scr{ border-radius:20px;overflow:hidden;background:var(--sky-surface-2); display:flex;flex-direction:column;min-height:452px; } .sky-phone__top{background:var(--sky-navy-2);color:var(--sky-ink-inv);padding:34px 15px 14px; display:flex;align-items:center;gap:9px;} .sky-phone__top :where(img){height:22px;} .sky-phone__hi{font-size:12.5px;font-weight:700;line-height:1.25;} .sky-phone__hi small{display:block;font-size:10px;color:var(--sky-ink-inv-3);font-weight:500;margin-top:2px;} .sky-phone__body{padding:12px;display:flex;flex-direction:column;gap:10px;flex:1;} .sky-phone__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .sky-phone__quick{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;} .sky-qa{background:var(--sky-white);border:1px solid var(--sky-line);border-radius:var(--sky-r); padding:9px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;} .sky-qa span{font-size:9.5px;font-weight:600;color:var(--sky-ink-2);} .sky-phone__tabs{margin-top:auto;background:var(--sky-white);border-top:1px solid var(--sky-line); display:flex;justify-content:space-around;padding:9px 0 14px;} /* v1 used a decorative grey here = 2.6:1 at 9.5px; that is text, so it takes the muted TEXT ink instead. */ .sky-phone__tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px; font-weight:600;color:var(--sky-ink-3);} .sky-phone__tab.is-on{color:var(--sky-blue-t);} /* --------------------------------------------------------------- connect -- */ .sky-conn{display:grid;gap:16px;margin-top:clamp(40px,5vw,58px);} .sky-conn__card{ background:var(--sky-white);border:1px solid var(--sky-line);border-radius:var(--sky-r-lg); padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:14px; } .sky-conn__card:hover{border-color:var(--sky-line-strong);box-shadow:var(--sky-sh-2);} /* Kit 11's tinted icon square: accent 50/100 tint behind the accent's TEXT value. */ .sky-conn__ico{ width:42px;height:42px;border-radius:var(--sky-r);display:grid;place-items:center;flex:none; background:var(--sky-blue-50);color:var(--sky-blue-t); } .sky-conn__ico :where(svg){width:21px;height:21px;} /* Same reason: the three connect cards are categories, not states, so the icon chips stay blue. The $skyConn rows in home.blade.php pass an empty $mod. */ .sky-conn__ico--red{background:var(--sky-red-50);color:var(--sky-red-t);} .sky-conn__t{font-size:1.125rem;font-weight:700;letter-spacing:-.02em;} .sky-conn__d{font-size:14.5px;line-height:1.65;color:var(--sky-ink-2);} /* --------------------------------------------------------------- pricing -- */ .sky-price{display:grid;gap:18px;margin-top:clamp(40px,5vw,58px);align-items:stretch;} .sky-plan{ background:var(--sky-white);border:1px solid var(--sky-line);border-radius:var(--sky-r-lg); padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column;position:relative; } .sky-plan:hover{border-color:var(--sky-line-strong);box-shadow:var(--sky-sh-2);} /* The featured plan is marked by a 1.5px navy rule, not by a gradient and a 60px drop shadow. Folds in the REFINEMENT PASS override. */ .sky-plan--top{border-color:var(--sky-navy);border-width:1.5px;box-shadow:var(--sky-sh-2);} /* Gold appears here and almost nowhere else — the single accent moment. Navy on gold is 9.5:1; the kit's own brown was 7.6:1 and untokenised. */ .sky-plan__flag{ position:absolute;top:-11px;inset-inline-start:clamp(24px,2.8vw,32px); background:var(--sky-amber);color:var(--sky-navy);font-size:11px;font-weight:800; letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--sky-r-sm); } .sky-plan__n{font-size:15px;font-weight:700;letter-spacing:-.01em;} .sky-plan__p{display:flex;align-items:baseline;gap:7px;margin-top:14px;flex-wrap:wrap;} .sky-plan__amt{font-size:clamp(1.85rem,3vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:1;} .sky-plan__per{font-size:13.5px;color:var(--sky-ink-3);font-weight:500;} .sky-plan__d{font-size:14px;line-height:1.6;color:var(--sky-ink-2);margin-top:12px;} .sky-plan__sep{height:1px;background:var(--sky-line);margin-block:22px;} .sky-plan__f{display:flex;flex-direction:column;gap:11px;flex:1;} .sky-plan__f :where(li){display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55; color:var(--sky-ink-2);} /* Blue, not teal: these ticks are list bullets, not a positive STATE, and #pricing already spends its one attention accent on the gold MOST POPULAR flag. Teal here put three accents in one region, which the kit's law forbids. */ .sky-plan__f :where(svg){width:16px;height:16px;flex:none;margin-top:2px;color:var(--sky-blue-700);} .sky-plan__cta{margin-top:24px;} .sky-plan__more{margin-top:12px;font-size:13px;font-weight:700;color:var(--sky-blue-700); background:none;border:0;cursor:pointer;padding:4px 0;font-family:inherit;} /* ------------------------------------------------------------------ faq --- */ .sky-faq{max-width:840px;margin:clamp(40px,5vw,56px) auto 0;border-top:1px solid var(--sky-line);} .sky-faq :where(details){border-bottom:1px solid var(--sky-line);} .sky-faq :where(summary){ display:flex;align-items:flex-start;gap:16px;padding:22px 0;cursor:pointer;list-style:none; font-size:clamp(1rem,1.3vw,1.09rem);font-weight:700;line-height:1.5;letter-spacing:-.01em; } .sky-faq summary::-webkit-details-marker{display:none;} .sky-faq :where(details[open] summary){color:var(--sky-blue-t);} .sky-faq__a{padding-block:0 24px;padding-inline:0 44px;font-size:15px;line-height:1.72;color:var(--sky-ink-2);} .sky-faq__a :where(p){margin:0 0 14px;} .sky-faq__a :where(p:last-child){margin-bottom:0;} /* ------------------------------------------------------------------ cta --- */ /* The closing band and the footer are ONE navy base, separated only by a rgba(255,255,255,.12) hairline — the kit's cover, reproduced at the bottom of the page. The v1 radial wash is gone; the chevron ribbon carries it. */ .sky-cta{position:relative;background:var(--sky-navy);color:var(--sky-ink-inv);overflow:hidden;} .sky-cta__in{position:relative;z-index:1;text-align:center;max-width:720px;margin-inline:auto;} .sky-cta__t{font-size:clamp(1.75rem,3.6vw,2.75rem);line-height:1.1;letter-spacing:-.035em;font-weight:800;} .sky-cta__s{margin-top:20px;font-size:clamp(1rem,1.3vw,1.13rem);line-height:1.7; color:var(--sky-ink-inv-3);font-weight:500;} .sky-cta__b{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px;} .sky-cta__n{margin-top:22px;font-size:13px;color:var(--sky-ink-inv-3);} /* --------------------------------------------------------------- footer --- */ .sky-foot{background:var(--sky-navy);color:var(--sky-ink-inv-2);border-top:1px solid var(--sky-navy-line);} .sky-foot__top{display:grid;gap:clamp(32px,4vw,52px);padding-block:clamp(52px,6vw,76px);} .sky-foot__blurb{font-size:14.5px;line-height:1.7;color:var(--sky-ink-inv-3);max-width:34ch;} .sky-foot__brand .sky-logo{margin-bottom:20px;} .sky-foot__contact{display:flex;flex-direction:column;gap:13px;margin-top:24px;} .sky-foot__ci{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.6;} .sky-foot__ci :where(svg){width:17px;height:17px;color:var(--sky-blue-inv);flex:none;margin-top:2px;} .sky-foot__ci a:hover{color:#fff;text-decoration:underline;} .sky-foot__cols{display:grid;gap:clamp(28px,3vw,40px);} .sky-foot__h{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--sky-ink-inv);margin-bottom:16px;} .sky-foot__l{display:flex;flex-direction:column;gap:11px;} .sky-foot__l :where(a){font-size:14px;color:var(--sky-ink-inv-3);transition:color .18s;} .sky-foot__l a:hover{color:#fff;} .sky-foot__bot{ border-top:1px solid var(--sky-navy-line);padding-block:26px; display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between; font-size:13px;color:var(--sky-ink-inv-3); } .sky-foot__legal{display:flex;flex-wrap:wrap;gap:20px;} .sky-foot__legal a:hover{color:#fff;} /* Coduko attribution — quiet, credible, not a badge */ .sky-foot__by{display:flex;align-items:center;gap:9px;font-size:13px;} .sky-foot__by :where(a){color:var(--sky-ink-inv);font-weight:700; border-bottom:1px solid rgba(255,255,255,.32);padding-bottom:1px;} .sky-foot__by a:hover{border-bottom-color:var(--sky-ink-inv);} /* --------------------------------------------------------------- motion --- */ /* Reveal-on-scroll. The hidden state is scoped to .sky-js — a class set by a tiny inline script in BEFORE first paint. Unscoped, this rule painted everything below the hero blank until the deferred skooly-site.js loaded and IntersectionObserver fired: invisible on a laptop, a blank screen on a slow mobile connection. Scoped, if the script never runs the content is just there. */ .sky-js .sky-rv{opacity:0;transform:translateY(18px);} .sky-js .sky-rv.is-in{opacity:1;transform:none;transition:opacity .6s var(--sky-ease),transform .6s var(--sky-ease);} .sky-js .sky-rv[data-d="1"].is-in{transition-delay:.07s;} .sky-js .sky-rv[data-d="2"].is-in{transition-delay:.14s;} .sky-js .sky-rv[data-d="3"].is-in{transition-delay:.21s;} @media (prefers-reduced-motion:reduce){ .sky *,.sky *::before,.sky *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } .sky-js .sky-rv{opacity:1;transform:none;} } /* ---------------------------------------------------------- breakpoints --- */ @media (min-width:640px){ .sky-conn{grid-template-columns:repeat(2,minmax(0,1fr));} .sky-shift__row{grid-template-columns:1fr 1.15fr;align-items:center;} .sky-step{grid-template-columns:132px 1fr;} } @media (min-width:900px){ .sky-roles{grid-template-columns:1.12fr 1fr;align-items:start;} .sky-roles__stack{display:grid;gap:18px;} .sky-price{grid-template-columns:repeat(2,minmax(0,1fr));} .sky-pane__grid{grid-template-columns:.85fr 1.15fr;} .sky-pane__grid--flip{grid-template-columns:1.15fr .85fr;} .sky-foot__top{grid-template-columns:1.25fr 2fr;} .sky-foot__cols{grid-template-columns:repeat(3,minmax(0,1fr));} } /* The desktop nav strip needs 1038px to hold its seven links on one row (six in the DEMO_OFF build), so the burger stays until 1040px. Below that it wrapped into a ragged two-row bar at exactly iPad-landscape width. The 1024px breakpoint below is the LAYOUT breakpoint and is unrelated. */ @media (min-width:1040px){ .sky-nav__menu,.sky-nav__actions{display:flex;} .sky-burger{display:none;} } @media (min-width:1024px){ .sky-hero__in{grid-template-columns:1.02fr 1fr;align-items:center;} .sky-conn{grid-template-columns:repeat(3,minmax(0,1fr));} .sky-price{grid-template-columns:repeat(3,minmax(0,1fr));} } /* Small screens: the CSS app mockup collapses its rail rather than scrolling */ @media (max-width:719px){ .sky-app__rail{width:60px;padding:14px 8px;} .sky-app__brand span,.sky-app__nav span{display:none;} .sky-app__brand{justify-content:center;padding-inline:0;} .sky-app__nav{justify-content:center;padding-inline:0;} .sky-tiles{grid-template-columns:repeat(2,minmax(0,1fr));} .sky-frame__url{display:none;} } /* RTL: the layout is logical-property based; only fix the decorative shift */ [dir="rtl"] .sky-ribbon,[dir="rtl"] .sky-glow{transform:scaleX(-1);} [dir="rtl"] .sky-step__n::after{transform:scaleX(-1);} /* ========================================================================== MODAL + FORMS The registration modal is a Bootstrap modal (bootstrap.bundle.min.js drives it), so .modal/.modal-dialog/.modal-content stay Bootstrap's. Everything inside is ours. ========================================================================== */ .sky-modal{ border:0;border-radius:var(--sky-r-lg);overflow:hidden; box-shadow:var(--sky-sh-3);font-family:var(--sky-font);color:var(--sky-ink); } .sky-modal__head{ display:flex;align-items:flex-start;gap:18px; padding:clamp(24px,3vw,32px) clamp(22px,3vw,34px) 20px; background:var(--sky-white);color:var(--sky-ink); border-bottom:1px solid var(--sky-line); } /* The header eyebrow becomes the kit's blue tint pill. */ .sky-modal__head .sky-eyebrow{ background:var(--sky-blue-50);color:var(--sky-blue-t); padding:6px 12px;border-radius:var(--sky-r-full);letter-spacing:.14em; } .sky-modal__head .sky-eyebrow::before{display:none;} .sky-modal__title{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;} .sky-modal__sub{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--sky-ink-2);max-width:52ch;} .sky-modal__x{ margin-inline-start:auto;flex:none;width:40px;height:40px;border-radius:var(--sky-r-sm); background:var(--sky-white);border:1px solid var(--sky-line-ui);color:var(--sky-ink-2); font-size:24px;line-height:1;cursor:pointer;transition:background .18s,border-color .18s; } .sky-modal__x:hover{background:var(--sky-surface);border-color:var(--sky-ink-3);} .sky-modal__body{padding:clamp(22px,3vw,32px);background:var(--sky-white);} .sky-form{display:flex;flex-direction:column;gap:18px;} .sky-form__row{display:grid;gap:18px;} .sky-field{display:flex;flex-direction:column;} .sky-field .sk-label{margin-bottom:7px;} .sky-req{color:var(--sky-red-t);font-weight:700;} .sky-form__extra{ display:grid;gap:18px;padding-top:20px;margin-top:2px;border-top:1px solid var(--sky-line); } .sky-opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;} /* .sky-opt is a label wrapping a real checkbox — an interactive control, so its border is a 1.4.11 UI component and takes --sky-line-ui, not --sky-line. */ .sky-opt{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; font-size:14px;font-weight:600;color:var(--sky-ink-2); background:var(--sky-white);border:1px solid var(--sky-line-ui); padding:9px 14px;border-radius:var(--sky-r-full);transition:border-color .18s,background .18s; } .sky-opt:hover{border-color:var(--sky-ink-3);background:var(--sky-surface);} .sky-opt input{accent-color:var(--sky-blue-700);width:18px;height:18px;margin:0;} .sky-modal__foot{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; margin-top:26px;padding-top:22px;border-top:1px solid var(--sky-line); } .sky-modal__fine{font-size:12.5px;line-height:1.6;color:var(--sky-ink-3);flex:1;min-width:220px;} .sky-modal__fine :where(a){color:var(--sky-blue-700);text-decoration:underline;text-underline-offset:2px;} .sky-modal__foot .commonBtn{margin-inline-start:auto;} /* The submit stays an for common.js, so give it button looks */ .sky-modal__foot input[type="submit"]{-webkit-appearance:none;appearance:none;} /* Make Bootstrap's backdrop match the brand */ .modal-backdrop.show{background:#0A1B45;opacity:.62;} @media (min-width:640px){ .sky-form__row{grid-template-columns:1fr 1fr;} .sky-form__extra{grid-template-columns:1fr 1fr;} } /* Hero art wrapper — keeps the CSS mockup from overflowing on small screens */ .sky-hero__art{min-width:0;} @media (max-width:1023px){ .sky-hero__art{max-width:620px;} } /* ========================================================================== QA FIXES ========================================================================== */ /* The secondary role cards had no gap below 900px, because .sky-roles__stack only became a grid inside the 900px media query — i.e. they collided on every phone and most tablets. */ .sky-roles__stack{display:grid;gap:18px;} /* Stat tiles inside the CSS product mockups are 4-up in a narrow column, so "Attendance" / "PKR 3.2M" overflowed their box at >=1024px. A minmax floor lets the row reflow to 2x2 instead of overflowing. */ /* 118px floor puts the hero's ~265px mockup column at a clean 2x2 rather than an unbalanced 3+1, and still gives wider mockups 3-4 columns. */ .sky-tiles{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));} .sky-tiles--3{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));} .sky-tile__v{overflow-wrap:anywhere;} .sky-tile__l{overflow-wrap:anywhere;} /* Sticky nav is 76px, so anchor targets were landing underneath it. */ html{scroll-padding-top:92px;} .sky-sect[id],section[id],#sky-main{scroll-margin-top:92px;} /* Contrast (WCAG 1.4.3 / 1.4.11) + brand v2 form box. skooly-tokens.css is shared with the admin panel and is off-limits, so the marketing site overrides it here. Specificity is load-bearing — never lower it and never add :where() to this group. */ .sky .sk-input::placeholder, .sky .sk-select::placeholder, .sky textarea::placeholder{color:var(--sky-ink-3);opacity:1;} .sky .sk-label{font-family:var(--sky-font);font-size:13px;font-weight:700;color:var(--sky-ink);} .sky .sk-input, .sky .sk-select, .sky textarea.sk-input{ font-family:var(--sky-font);font-size:15px;font-weight:500;color:var(--sky-ink); background:var(--sky-white);border:1.5px solid var(--sky-line-ui); border-radius:8px;padding:11px 14px; } .sky .sk-input:hover, .sky .sk-select:hover{border-color:var(--sky-ink-3);} .sky .sk-input:focus, .sky .sk-select:focus, .sky textarea.sk-input:focus{ border-color:var(--sky-blue);box-shadow:0 0 0 3px rgba(27,127,245,.16); } .sky .sk-input:focus-visible, .sky .sk-select:focus-visible, .sky textarea.sk-input:focus-visible{outline:2px solid var(--sky-blue);outline-offset:2px;} /* Empty-state panel for sections whose data has not been published yet. */ .sky-empty{ border:1px dashed var(--sky-line-strong);border-radius:var(--sky-r-lg); padding:clamp(28px,4vw,44px);text-align:center;background:var(--sky-white); margin-top:clamp(32px,4vw,48px); } .sky-empty__t{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;} .sky-empty__d{margin-top:10px;font-size:15px;line-height:1.65;color:var(--sky-ink-2); max-width:52ch;margin-inline:auto;} .sky-empty__b{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} /* The CSS product mockups are light surfaces that can sit inside a dark section (.sky-hero sets color:#fff). Anything inside them without an explicit colour was inheriting white — so tile values, row names and panel headings rendered white-on-white and vanished. Anchor the colour at the frame so the mockups are self-contained wherever they are placed. */ .sky-frame, .sky-phone__scr{color:var(--sky-ink);} .sky-app__title, .sky-tile__v, .sky-row__n, .sky-panel__h{color:var(--sky-ink);} .sky-row__m{color:var(--sky-ink-3);} /* The dark rail inside the frame keeps its own light-on-dark treatment. */ .sky-app__rail{color:var(--sky-ink-inv-2);} .sky-app__brand span{color:#fff;} /* Mobile overflow fix. Grid items default to min-width:auto, so an unbreakable line inside one of them forces the whole track — and therefore the page — wider than the viewport. The hard
in the hero h1 made "Run your entire school" a ~400px min-content line, pushing the layout past a 390px screen (body overflow-x:hidden then clipped the copy rather than wrapping it). Hide the break below 640px and let every flex/grid child actually shrink. */ .sky-br{display:none;} @media (min-width:640px){ .sky-br{display:inline;} } .sky-hero__in>*, .sky-hero__copy, .sky-hero__art, .sky-pane__grid>*, .sky-shift__row>*, .sky-step>*, .sky-roles>*, .sky-foot__top>*{min-width:0;} .sky-hero__title, .sky-h2, .sky-cta__t{overflow-wrap:break-word;} .sky-hero__art{max-width:100%;} /* On phones the two hero CTAs sized to their labels, so they stepped in and out at different widths. Match them and give a full-width tap target. */ @media (max-width:479px){ .sky-hero__cta{flex-direction:column;align-items:stretch;} .sky-hero__cta .sky-btn{width:100%;} .sky-cta__b{flex-direction:column;align-items:stretch;} .sky-cta__b .sky-btn{width:100%;} } /* ========================================================================== PRICING: plan limit line + cost estimator ========================================================================== */ .sky-plan__limit{ margin-top:10px;font-size:13px;font-weight:700;color:var(--sky-blue-t); letter-spacing:.01em; } .sky-plan--top .sky-plan__limit{color:var(--sky-blue-t);} /* A self-contained instrument, so it keeps the navy — the way the kit's own dashboard sidebar is navy inside a light page. Flat: no drop shadow. */ .sky-est{ margin-top:clamp(28px,3.5vw,44px); background:var(--sky-navy);color:var(--sky-ink-inv); border-radius:var(--sky-r-lg);overflow:hidden; box-shadow:none; } .sky-est__grid{display:grid;gap:0;} .sky-est__controls{padding:clamp(26px,3.2vw,40px);} .sky-est__t{font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.02em;} .sky-est__s{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--sky-ink-inv-3);} .sky-est__row{margin-top:24px;} /* align-items:center folds in the later duplicate that used to override this. */ .sky-est__label{ display:flex;align-items:center;justify-content:space-between;gap:12px; font-size:14px;font-weight:600;color:var(--sky-ink-inv-2);margin-bottom:10px; } /* Range input, styled consistently across engines */ .sky-est__range{ -webkit-appearance:none;appearance:none;width:100%;height:34px; background:transparent;cursor:pointer;display:block; } /* The track is the control, so it is a 1.4.11 component: --sky-navy-4 (#2C3D63) was 1.56:1 on the estimator's navy. --sky-navy-ui is 4.14:1 and is already this file's declared "interactive on navy" value. */ .sky-est__range::-webkit-slider-runnable-track{ height:6px;border-radius:var(--sky-r-full);background:var(--sky-navy-ui); } .sky-est__range::-moz-range-track{ height:6px;border-radius:var(--sky-r-full);background:var(--sky-navy-ui); } .sky-est__range::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px; border-radius:50%;background:var(--sky-white);border:5px solid var(--sky-blue); box-shadow:0 2px 8px rgba(10,27,69,.45);transition:transform .15s var(--sky-ease); } .sky-est__range::-moz-range-thumb{ width:22px;height:22px;border-radius:50%;background:var(--sky-white); border:5px solid var(--sky-blue);box-shadow:0 2px 8px rgba(10,27,69,.45); } .sky-est__range:active::-webkit-slider-thumb{transform:scale(1.12);} .sky-est__range:active::-moz-range-thumb{transform:scale(1.12);} .sky-est__range:focus-visible{outline:2px solid var(--sky-blue);outline-offset:2px;border-radius:var(--sky-r-full);} .sky-est__result{ padding:clamp(26px,3.2vw,40px); background:var(--sky-navy-2); border-top:1px solid var(--sky-navy-line); display:flex;flex-direction:column;justify-content:center; } .sky-est__calc{font-size:13px;color:var(--sky-ink-inv-3);letter-spacing:.02em;} .sky-est__total{ margin-top:6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.1; } .sky-est__total .sky-est__per{font-size:14px;font-weight:500;color:var(--sky-ink-inv-3);letter-spacing:0;} /* Free result gets the positive colour (teal = the accent law's "no charge"). */ .sky-est.is-free .sky-est__total{color:var(--sky-green-400);} .sky-est__note{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--sky-ink-inv-2);} .sky-est__result .sky-btn{margin-top:22px;} @media (min-width:900px){ .sky-est__grid{grid-template-columns:1.25fr 1fr;} .sky-est__result{border-top:0;border-inline-start:1px solid var(--sky-navy-line);} } /* ========================================================================== MINIMAL REBOOT Bootstrap's reboot used to supply these. It is no longer loaded on the marketing pages, so the handful of rules the layout actually relied on are restated here. ========================================================================== */ html{-webkit-text-size-adjust:100%;} body.sky{margin:0;} /* :where() again — written bare, `.sky button{border:0}` stripped the border off every button on the page and `font-size:100%` made the contact form's a different size from every beside it. */ :where(.sky) :where(button,input,select,textarea){font-family:inherit;font-size:100%;line-height:inherit;margin:0;} :where(.sky) :where(button){background:none;border:0;} :where(.sky) :where(table){border-collapse:collapse;} :where(.sky) :where(h1,h2,h3,h4,h5,h6,p,figure){margin:0;} :where(.sky) :where(address){font-style:normal;} .sky [hidden]{display:none !important;} /* Estimator: exact-value number field beside each slider */ .sky-est__num{ width:96px;text-align:end; font-family:inherit;font-size:1.25rem;font-weight:700;letter-spacing:-.02em; color:var(--sky-ink-inv);background:rgba(255,255,255,.06); border:1.5px solid var(--sky-navy-ui);border-radius:var(--sky-r-sm); padding:6px 10px;-moz-appearance:textfield; } .sky-est__num::-webkit-outer-spin-button, .sky-est__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .sky-est__num:focus{outline:2px solid var(--sky-blue);outline-offset:2px;background:rgba(255,255,255,.12);} /* ========================================================================== PRICING v2 — setup line, plan switch, terms strip ========================================================================== */ .sky-plan__setup{ margin-top:6px;font-size:13px;font-weight:500;color:var(--sky-ink-2); } .sky-plan--top .sky-plan__setup{color:var(--sky-ink-2);} /* Segmented plan switch inside the estimator */ .sky-est__plans{ display:inline-flex;gap:4px;margin-top:20px;padding:4px; background:rgba(255,255,255,.06);border:1px solid var(--sky-navy-ui); border-radius:var(--sky-r-full);flex-wrap:wrap; } /* WCAG 1.4.11: each segment is its own control, so it needs a boundary and a >=3:1 state change against the group's ground (#18284F). The transparent border keeps the metrics identical between states; the selected segment draws it in --sky-navy-ui (#6B7EA6 = 3.52:1 on that ground). NOTE the fill deliberately stays --sky-blue-700, NOT --sky-blue: white 13.5px text on #1B7FF5 is 3.90:1 and would break the 4.5:1 text floor. */ .sky-est__plan{ display:inline-flex;align-items:baseline;gap:7px; font-family:inherit;font-size:13.5px;font-weight:700;color:var(--sky-ink-inv-2); padding:9px 16px;border:1px solid transparent;border-radius:var(--sky-r-full);cursor:pointer; transition:background .2s var(--sky-ease),color .2s,border-color .2s; } .sky-est__plan small{font-size:11.5px;font-weight:500;opacity:.75;} .sky-est__plan:hover{color:var(--sky-ink-inv);background:rgba(255,255,255,.07);} .sky-est__plan.is-on{background:var(--sky-blue-700);color:var(--sky-ink-inv); border-color:var(--sky-navy-ui);} .sky-est__plan.is-on small{opacity:.9;} /* Commercial terms strip */ .sky-terms{ display:grid;gap:1px;margin-top:clamp(24px,3vw,36px); background:var(--sky-line);border:1px solid var(--sky-line); border-radius:var(--sky-r-lg);overflow:hidden; } .sky-terms__item{background:var(--sky-white);padding:clamp(20px,2.4vw,26px);} .sky-terms__k{ display:block;font-size:11px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--sky-ink-3); } .sky-terms__v{ display:block;margin-top:9px;font-size:1.25rem;font-weight:800; letter-spacing:-.02em;color:var(--sky-ink); } .sky-terms__n{ display:block;margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--sky-ink-3); } @media (min-width:640px){ .sky-terms{grid-template-columns:1fr 1fr;} } @media (min-width:1024px){ .sky-terms{grid-template-columns:repeat(4,1fr);} } /* ========================================================================== REFINEMENT PASS — depth, bento layouts, glass, richer micro-interactions Keeps the navy/white editorial foundation; adds the layering and motion a 2026 SaaS site is expected to have, without tipping into decoration. ========================================================================== */ /* ---- Ambient depth on dark sections ------------------------------------- One slow, very low-contrast conic sweep. It reads as light falling across a surface rather than as a "gradient blob", and it pauses for reduced motion. */ .sky-hero,.sky-cta,.sky-est{position:relative;isolation:isolate;} /* ---- THE CHEVRON RIBBON ------------------------------------------------- "Everything decorative in Skooly is the logo's chevron, repeated. No stock illustration, no cartoon children, no floating pencils." Geometry per the kit: fill:none, round caps and joins, 16px stroke, chevrons alternating up/down, colours cycling blue -> teal -> gold -> coral. The four ribbon colours appear together ONLY here and in the logo. Static by construction — the v1 skyDrift animation is gone and does not return. `.sky-glow` is kept as an alias so older markup still resolves to the ribbon. */ .sky-ribbon,.sky-glow{ position:absolute;inset-block-start:-30px;inset-inline-end:20px; width:min(340px,34%);aspect-ratio:3/2; z-index:-1;pointer-events:none;opacity:1; background-repeat:no-repeat;background-position:center;background-size:contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Cg fill='none' stroke-width='16' stroke-linecap='round' stroke-linejoin='round' opacity='.18'%3E%3Cpath d='M40 120 L90 70 L140 120' stroke='%231B7FF5'/%3E%3Cpath d='M120 90 L170 140 L220 90' stroke='%230FBEA6'/%3E%3C/g%3E%3C/svg%3E"); } /* On navy: the 500 values at 18%. On white/canvas: the 200 tints at 50%. */ .sky-soft .sky-ribbon,.sky-soft .sky-glow, .sky-hero .sky-ribbon,.sky-hero .sky-glow, .sky-light .sky-ribbon,.sky-light .sky-glow{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Cg fill='none' stroke-width='16' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M40 120 L90 70 L140 120' stroke='%23D2E7FD'/%3E%3Cpath d='M120 90 L170 140 L220 90' stroke='%23C4F3EA'/%3E%3C/g%3E%3C/svg%3E");} /* Full-bleed eight-chevron band, for a section that wants the whole motif. */ .sky-ribbon--wide{ inset:0;width:100%;height:100%;aspect-ratio:auto; background-size:cover;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='220' viewBox='0 0 900 220'%3E%3Cg fill='none' stroke-width='16' stroke-linecap='round' stroke-linejoin='round' opacity='.18'%3E%3Cpath d='M40 150 L100 90 L160 150' stroke='%231B7FF5'/%3E%3Cpath d='M130 60 L190 120 L250 60' stroke='%230FBEA6'/%3E%3Cpath d='M240 150 L300 90 L360 150' stroke='%23FFB623'/%3E%3Cpath d='M330 60 L390 120 L450 60' stroke='%23FF5D52'/%3E%3Cpath d='M440 150 L500 90 L560 150' stroke='%231B7FF5'/%3E%3Cpath d='M530 60 L590 120 L650 60' stroke='%230FBEA6'/%3E%3Cpath d='M640 150 L700 90 L760 150' stroke='%23FFB623'/%3E%3Cpath d='M730 60 L790 120 L850 60' stroke='%23FF5D52'/%3E%3C/g%3E%3C/svg%3E"); } .sky-soft .sky-ribbon--wide,.sky-hero .sky-ribbon--wide,.sky-light .sky-ribbon--wide{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='220' viewBox='0 0 900 220'%3E%3Cg fill='none' stroke-width='16' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M40 150 L100 90 L160 150' stroke='%23D2E7FD'/%3E%3Cpath d='M130 60 L190 120 L250 60' stroke='%23C4F3EA'/%3E%3Cpath d='M240 150 L300 90 L360 150' stroke='%23FFEBBF'/%3E%3Cpath d='M330 60 L390 120 L450 60' stroke='%23FFDCD9'/%3E%3Cpath d='M440 150 L500 90 L560 150' stroke='%23D2E7FD'/%3E%3Cpath d='M530 60 L590 120 L650 60' stroke='%23C4F3EA'/%3E%3Cpath d='M640 150 L700 90 L760 150' stroke='%23FFEBBF'/%3E%3Cpath d='M730 60 L790 120 L850 60' stroke='%23FFDCD9'/%3E%3C/g%3E%3C/svg%3E");} /* .sky-cta is overflow:hidden, so the shared -30px offset sheared the chevron apex flat right on the white-to-navy seam. Tuck it inside its own band. */ /* Section divider: four chevrons then a hairline (kit 10). */ .sky-div{ display:block;width:100%;height:20px;border:0;margin:0; /* BUG FIX: the hairline used to be baked into the asset as 'M124 14 H356' inside a 360-wide viewBox at background-size:auto 20px, so it drew a fixed ~232px line no matter how wide the container was. Same four chevrons, same kit order, same hex values — the rule is now a second background layer, so it fills whatever space is left. */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='20' viewBox='0 0 120 20'%3E%3Cg fill='none' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14 L14 4 L24 14' stroke='%231B7FF5'/%3E%3Cpath d='M34 14 L44 4 L54 14' stroke='%230FBEA6'/%3E%3Cpath d='M64 14 L74 4 L84 14' stroke='%23FFB623'/%3E%3Cpath d='M94 14 L104 4 L114 14' stroke='%23FF5D52'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / auto 20px, linear-gradient(var(--sky-line),var(--sky-line)) no-repeat right center / calc(100% - 132px) 1px; } [dir="rtl"] .sky-div{background-position:right center,left center;} /* ---- Raised panel on navy — flat, not frosted --------------------------- */ /* The kit has no glass anywhere. A raised panel inside a navy band is a flat lighter navy with a 1px white-alpha rule (kit 12 sidebar card). */ .sky-glass{ background:var(--sky-navy-panel); border:1px solid var(--sky-navy-line); border-radius:var(--sky-r-lg); } /* ---- Bento: roles -------------------------------------------------------- */ /* The v1 hover sheen, the -4px lift and the lead card's radial wash are gone: the card is flat, the rule does the structure and the shadow only lifts. */ .sky-roles{display:grid;gap:16px;} .sky-role{ position:relative;overflow:hidden; transition:box-shadow .3s var(--sky-ease),border-color .3s; } /* Explicit bento placement. Auto-flow left the 2x2 lead card stranded with a large empty cell, so each card is positioned by hand: lead = 2 cols x 2 rows (left) admins = col 3, row 1 teachers = col 3, row 2 parents = full width, row 3 */ @media (min-width:900px){ /* align-items:stretch overrides the earlier `start` rule, so the 2x2 lead card actually fills its span instead of stopping short. */ .sky-roles{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;} .sky-roles__stack{display:contents;} .sky-role--lead{grid-column:1 / span 2;grid-row:1 / span 2;} .sky-roles__stack > .sky-role:nth-child(1){grid-column:3;grid-row:1;} .sky-roles__stack > .sky-role:nth-child(2){grid-column:3;grid-row:2;} /* The last card runs the full width and goes horizontal, so the row reads as a deliberate band rather than a leftover cell. */ .sky-roles__stack > .sky-role:nth-child(3){ grid-column:1 / span 3;grid-row:3; display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr); grid-template-rows:auto auto; gap:6px clamp(24px,3.5vw,52px);align-items:start; } /* Children are tag / title / description in source order, so place them by hand — auto-flow put the title in the right column and the description underneath the tag. */ .sky-roles__stack > .sky-role:nth-child(3) .sky-role__tag{grid-column:1;grid-row:1;justify-self:start;} .sky-roles__stack > .sky-role:nth-child(3) .sky-role__t{grid-column:1;grid-row:2;margin-top:8px;} .sky-roles__stack > .sky-role:nth-child(3) .sky-role__d{ grid-column:2;grid-row:1 / span 2;margin-top:0;align-self:center;max-width:62ch; } } /* ---- Bento: integrations ------------------------------------------------- */ .sky-conn__card{ position:relative;overflow:hidden; transition:box-shadow .3s var(--sky-ease),border-color .3s; } .sky-conn__ico{transition:transform .3s var(--sky-ease);} .sky-conn__card:hover .sky-conn__ico{transform:scale(1.04);} @media (min-width:900px){ .sky-conn{grid-template-columns:repeat(4,minmax(0,1fr));} .sky-conn__card:first-child{grid-column:span 2;} .sky-conn__card:nth-child(2){grid-column:span 2;} .sky-conn__card:nth-child(3){grid-column:span 4;flex-direction:row;align-items:center;gap:26px;} .sky-conn__card:nth-child(3) .sky-conn__ico{width:54px;height:54px;} .sky-conn__card:nth-child(3) .sky-conn__t{font-size:1.25rem;flex:none;min-width:210px;} .sky-conn__card:nth-child(3) .sky-conn__d{flex:1;min-width:0;} } /* ---- Editorial rows: add a quiet index ----------------------------------- */ .sky-shift__row{ position:relative;transition:background .25s var(--sky-ease); border-radius:var(--sky-r); padding-inline:clamp(0px,1.4vw,18px); } /* ---- Workflow steps: connective spine ----------------------------------- */ .sky-step{position:relative;} .sky-step__n{position:relative;} @media (min-width:640px){ .sky-step__n::before{ content:"";position:absolute;inset-inline-start:-1px;top:26px;bottom:-42px; width:1px;background:linear-gradient(180deg,var(--sky-line),transparent); } .sky-step:last-child .sky-step__n::before{display:none;} } /* ---- Plan cards ---------------------------------------------------------- */ .sky-plan{transition:box-shadow .3s var(--sky-ease),border-color .3s;} /* ---- Product frames ------------------------------------------------------ */ /* v1's inset white top-highlight is gone: structure is a 1px rule, not a sheen. */ .sky-frame{position:relative;} @media (prefers-reduced-motion:reduce){ .sky-role:hover,.sky-conn__card:hover,.sky-plan:hover, .sky-btn--primary:hover,.sky-btn--white:hover{transform:none;} } /* ========================================================================== PRODUCT DEPTH PASS (v3) — the product is the graphic. Supersedes: the v1 glow (now the chevron ribbon), shift hover (removed), metric-strip stat styling, placeholder glyph rules. Extends everything else. ========================================================================== */ /* (The second :root that used to live here has been merged into the single token block at the top of the file — a later :root silently wins.) */ /* Icon system — consumes the #i-* sprite (icons.blade.php) */ /* Kit icon geometry: 24px grid, 1.8 stroke, round caps and joins, fill:none. Stroke colour is currentColor — the sprite never authors stroke/fill. */ .sky-ic{ flex:none;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle; } .sky-ic--micro{stroke-width:1.9;} .sky-ic--fill{fill:currentColor;stroke:none;} /* Emphasis span — replaces the two inline-styled s (home 301, 348) */ .sky-em{font-style:normal;color:var(--sky-blue-700);} .sky-dark .sky-em,.sky-cta .sky-em{color:var(--sky-blue-inv);} /* Tabular figures wherever numbers align (no markup changes needed) */ .sky-tile__v,.sky-metric__v,.sky-est__total,.sky-est__num,.sky-est__calc, .sky-row__m,.sky-doc,.sky-terms__v{font-variant-numeric:tabular-nums;} /* ---- Hero: honest metric strip, art plane, floating toast ---------------- */ /* Metric strip: capability words on ruled columns, not counter-styled stats. Supersedes .sky-metric__v sizing and the color modifiers above. */ .sky-hero__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;} .sky-metric{border-inline-start:1px solid var(--sky-line);padding-inline-start:16px;} .sky-metric:first-child{border-inline-start:0;padding-inline-start:0;} .sky-metric::before{content:"";display:block;width:20px;height:2px;border-radius:2px; margin-bottom:10px;background:var(--sky-blue);} .sky-metric__v{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--sky-ink);} /* THE ACCENT LAW. v1 painted these three figures light-blue / green / amber, i.e. three accents inside one screen region, chosen decoratively — "Five roles" is not a done/paid/present state. The modifiers survive as markup hooks so nothing goes unstyled, but the hero region now carries exactly one accent: blue. */ .sky-metric--blue::before,.sky-metric--green::before, .sky-metric--amber::before{background:var(--sky-blue);} @media (max-width:479px){.sky-metric__l{font-size:11.5px;}} /* Ghost plane behind the hero frame — the module stack, at zero asset cost */ .sky-hero__art{position:relative;} .sky-hero__art::before{content:"";position:absolute;z-index:-1; inset-block-start:10%;inset-block-end:-14px;inset-inline-start:12%;inset-inline-end:-16px; border-radius:var(--sky-r-lg);background:var(--sky-surface); border:1px solid var(--sky-line);} @media (max-width:1023px){.sky-hero__art::before{display:none;}} /* Floating absence-alert toast (uses .sky-notif below) */ /* bottom:40px put this on top of the fee rows and sliced two student names in half. Kit 13 hangs its floating card at left:-78px / bottom:-64px so it clears the card's content and overlaps only the bottom-left corner. */ .sky-hero__toast{position:absolute;inset-inline-start:-78px;bottom:-64px;z-index:2;} /* :not(.is-in) keeps this from tying (0,2,0) with .sky-rv.is-in{transform:none} and winning by source order — the toast never landed otherwise. */ .sky-hero__toast.sky-rv:not(.is-in){transform:translateY(26px);} /* lands after the frame */ @media (max-width:1023px){.sky-notif.sky-hero__toast{display:none;}} /* Rail + campus chip */ .sky-app__nav .sky-ic{width:14px;height:14px;opacity:.8;} .sky-app__nav.is-on .sky-ic{opacity:1;} /* 0, not a gap value: this rule exists only to cancel the base chip's margin-inline-start:auto — the parent's flex gap does the separating. */ .sky-app__chip + .sky-app__chip{margin-inline-start:0;} /* Below ~360px the mock's title plus two chips no longer fit the frame, and .sky-frame{overflow:hidden} sliced "All campuses" mid-word. The chips are set dressing inside a picture of the app, so drop them rather than clip. */ @media (max-width:359px){.sky-app__chip{display:none;}} /* ---- Product primitives (shared kit) ------------------------------------- */ /* Sparkline — flat-alpha area (no , no id collisions), draw-in armed by JS */ .sky-spark{display:block;width:100%;height:26px;margin-top:8px;} .sky-spark__a{fill:rgba(27,127,245,.10);} .sky-spark__l{fill:none;stroke:var(--sky-blue);stroke-width:2;stroke-linecap:round; vector-effect:non-scaling-stroke;} /* 130 = safe upper bound on the polyline's real ~105px length. Real units, not pathLength:1 — dasharray:1 renders as a permanent dotted line on some WebKit builds (the Blade file drops pathLength in a parallel fix). */ .sky-spark.is-arm .sky-spark__l{stroke-dasharray:130;stroke-dashoffset:130;} .sky-rv.is-in .sky-spark.is-arm .sky-spark__l{ stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--sky-ease) .25s;} /* Week heat strip — sequential blue ONLY (never green→red) */ .sky-heat{display:flex;gap:3px;margin-top:6px;} .sky-heat i{width:9px;height:9px;border-radius:2px;background:var(--sky-blue-100);} .sky-heat i[data-l="2"]{background:var(--sky-blue-300);} .sky-heat i[data-l="3"]{background:var(--sky-blue-400);} .sky-heat i[data-l="4"]{background:var(--sky-blue);} /* data-l="0" is the absent day — coral, per the accent law. */ .sky-heat i[data-l="0"]{background:var(--sky-surface-2);box-shadow:inset 0 0 0 1.5px var(--sky-red);} /* Collection ring — static, circumference-100 trick */ .sky-tile--ring{display:grid;place-items:center;padding:8px;} .sky-ring{position:relative;width:64px;} .sky-ring svg{display:block;width:100%;} .sky-ring__t,.sky-ring__v{fill:none;stroke-width:3.6;} .sky-ring__t{stroke:var(--sky-surface-2);} .sky-ring__v{stroke:var(--sky-blue);stroke-linecap:round;} .sky-ring__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;} .sky-ring__c b{font-size:12px;font-weight:800;letter-spacing:-.02em;color:var(--sky-ink);} .sky-ring__c span{font-size:8px;color:var(--sky-ink-3);font-weight:600;} /* Fee challan / document artifact */ .sky-doc{position:relative;background:var(--sky-white);border:1px solid var(--sky-line); border-radius:var(--sky-r);box-shadow:var(--sky-sh-2);padding:12px 14px;font-size:10.5px; color:var(--sky-ink);} .sky-doc::before{content:"";position:absolute;inset:0 0 auto 0;height:3px; border-radius:var(--sky-r) var(--sky-r) 0 0;background:var(--sky-blue);} .sky-doc__h{display:flex;justify-content:space-between;gap:10px;font-weight:800;font-size:11px; padding-bottom:6px;} .sky-doc__r{display:flex;justify-content:space-between;gap:10px;padding-block:4px; color:var(--sky-ink-2);border-top:1px dashed var(--sky-line);} .sky-doc__t{display:flex;justify-content:space-between;gap:10px;padding-top:6px;margin-top:2px; font-weight:800;border-top:1px solid var(--sky-line);} /* Push-notification card */ /* A floating artefact — the one thing on the page that is genuinely lifted. */ .sky-notif{display:flex;gap:10px;align-items:flex-start;max-width:250px;text-align:start; background:var(--sky-white);border:1px solid var(--sky-line);border-radius:var(--sky-r); padding:11px 14px;box-shadow:var(--sky-sh-3);font-size:11.5px;color:var(--sky-ink);} .sky-notif__ico{width:30px;height:30px;border-radius:var(--sky-r-sm);flex:none;display:grid; place-items:center;background:var(--sky-blue-50);color:var(--sky-blue-t);} .sky-notif__b{min-width:0;} .sky-notif b{display:block;font-size:11.5px;font-weight:800;color:var(--sky-ink);} .sky-notif span{display:block;color:var(--sky-ink-3);font-size:10.5px;line-height:1.45;margin-top:2px;} .sky-notif time{font-size:9.5px;color:var(--sky-ink-3);margin-inline-start:auto;flex:none;} /* ---- Mock utilities (kill the inline-style debt in platform panes) ------- */ .sky-mock{background:var(--sky-white);padding:18px;} .sky-mock__head{display:flex;align-items:center;gap:10px;margin-bottom:14px;} .sky-mock__t{font-size:14px;font-weight:800;color:var(--sky-ink);} .sky-mock__list{padding:14px;display:flex;flex-direction:column;gap:13px;} .sky-mock__lr{display:flex;justify-content:space-between;font-size:12px;font-weight:600; margin-bottom:6px;} .sky-mock__lr span:last-child{color:var(--sky-ink-3);} .sky-mock__row{margin-top:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;} .sky-mock__meta{font-size:12px;color:var(--sky-ink-3);} .sky-mock .sky-tiles{margin-bottom:14px;} .sky-mock__stage{position:relative;} /* VERIFY PASS FIXES: the rotated doc sat on top of the payments panel, covering the Export link and a status pill — it now peeks from behind. */ .sky-mock__doc{position:absolute;inset-inline-end:-10px;top:-16px;width:150px; transform:rotate(3deg);z-index:0;} .sky-mock__stage .sky-panel{position:relative;z-index:1;} [dir="rtl"] .sky-mock__doc{transform:rotate(-3deg);} @media (max-width:899px){.sky-mock__doc{display:none;}} /* ---- Live demo: badge, scope panels, credential copy state --------------- */ .sky-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700; color:var(--sky-green-t);background:var(--sky-green-50); border:1px solid var(--sky-green-100);padding:6px 12px;border-radius:var(--sky-r-full); margin-bottom:16px;} .sky-live i{width:7px;height:7px;border-radius:50%;background:var(--sky-green);flex:none;} /* VERIFY PASS FIXES: desktop-pointer gating — this was the only continuously running animation on mobile. */ @media (prefers-reduced-motion:no-preference) and (min-width:1024px) and (hover:hover){ .sky-live i{animation:skyPulse 2.4s ease-in-out infinite;} } @keyframes skyPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(15,190,166,.38);} 50%{box-shadow:0 0 0 5px rgba(15,190,166,0);} } /* Permission-wall scope panel — the RBAC story drawn as UI. VERIFY PASS FIXES: the old float:inline-end design never floated — float is inert on flex items, and .sky-demo .sky-role is a flex column — so the panel rendered as a stacked left block. Redesigned as a horizontal chip strip that sits between the role description and the CTA at every viewport (order places it before the bottom-pinned .sky-demo__go). */ .sky-scope{order:1;display:flex;flex-wrap:wrap;gap:4px;width:100%; margin-block:2px 16px;padding:8px; background:var(--sky-surface);border:1px solid var(--sky-line);border-radius:var(--sky-r);} .sky-demo .sky-demo__go{order:2;} .sky-scope i{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600; font-style:normal;color:var(--sky-ink-2);padding:4px 8px;border-radius:var(--sky-r-sm); background:var(--sky-white);border:1px solid var(--sky-line);} .sky-scope i.is-on{background:var(--sky-blue-50);border-color:transparent;color:var(--sky-blue-t);} /* NOT opacity: .6 x --sky-ink-2 composites to #929BAC on white = 2.78:1, and this is real content (which modules the role can see), not a disabled control. #5F6E8C on #EEF3FA is 4.60:1. */ .sky-scope i.is-off{color:var(--sky-ink-3);background:var(--sky-surface-2); border-color:var(--sky-line);} .sky-scope .sky-ic{width:12px;height:12px;} .sky-demo__note code{cursor:pointer;transition:background .2s,color .2s;} .sky-demo__note code.is-copied{background:var(--sky-green-50);color:var(--sky-green-t);} .sky-demo__wa{margin-top:14px;font-size:14px;} /* ---- Shift, roles, workflows, mobile, connect ---------------------------- */ /* Shift: from ✗ to →. The arrow IS the section's verb. (Recoloured above.) */ [dir="rtl"] .sky-shift__x .sky-ic,[dir="rtl"] .sky-shift__c .sky-ic{transform:scaleX(-1);} @media (min-width:900px){ .sky-shift__row{padding-inline-start:56px;} .sky-shift__row::before{content:attr(data-no);position:absolute;inset-inline-start:14px; top:30px;font-size:12px;font-weight:600;color:var(--sky-ink-3); font-variant-numeric:tabular-nums;letter-spacing:.06em;} } /* Roles: campus comparison inside the lead card (finally uses .sky-glass) */ .sky-role__stat{margin-top:22px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;} /* Was inline in home.blade.php; the kit's LABEL role is 12/800/+.14em, Manrope. */ .sky-role__stat-h{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--sky-ink-inv-3);} .sky-role__cmp{display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:10px; font-size:12px;color:var(--sky-ink-inv-2);} .sky-role__cmp b{font-weight:800;color:var(--sky-ink-inv);font-variant-numeric:tabular-nums;} .sky-role__cmp .sky-bar{height:5px;background:rgba(255,255,255,.14);} .sky-role__cmp .sky-bar>span{background:var(--sky-blue-400);} /* VERIFY PASS FIXES: on tablets the stat block inflates the 2x2 lead card and strands whitespace in the side cards. */ @media (min-width:900px) and (max-width:1023px){.sky-role__stat{display:none;}} .sky-role__tag .sky-ic{width:13px;height:13px;} /* Parents band: the school day as chips */ .sky-day{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;} @media (min-width:900px){ .sky-roles__stack > .sky-role:nth-child(3) .sky-day{grid-column:2;grid-row:3;margin-top:6px;} } /* Workflows: step 03 gets the money artifact */ .sky-step__art{display:none;} @media (min-width:900px){ .sky-step--art{grid-template-columns:132px 1fr 190px;} .sky-step__art{display:block;} .sky-step__art .sky-doc{width:172px;transform:rotate(2deg);} [dir="rtl"] .sky-step__art .sky-doc{transform:rotate(-2deg);} } /* Mobile: grounded phone + real glyphs + floating push card. The v1 radial glow behind the phone is gone — no gradients, no glows. */ .sky-phone-stage{position:relative;display:flex;justify-content:center;} .sky-phone{position:relative;z-index:1;} /* One accent per screen region: the quick-action row is one region, so it is one colour. (v1 painted four different accents across four 40px tiles.) */ .sky-qa .sky-ic{width:16px;height:16px;color:var(--sky-blue-700);} .sky-qa:nth-child(4) .sky-ic{color:var(--sky-ink-3);} .sky-phone__tab .sky-ic{width:14px;height:14px;opacity:.55;} .sky-phone__tab.is-on .sky-ic{opacity:1;} .sky-phone__notif{position:absolute;z-index:2;top:84px;inset-inline-start:calc(50% + 62px); width:232px;} /* VERIFY PASS FIXES: card overflowed the viewport from 1024 to ~1250px, so it only shows once the stage column is wide enough. */ @media (max-width:1279px){.sky-phone__notif{display:none;}} /* Connect: concrete, scannable anchors (true capability names as text chips) */ .sky-conn__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px;} /* 12px is the kit's type floor; these are real page content, not mockup internals. */ .sky-conn__chips .sky-chip{font-size:12px;padding:4px 10px;} /* ---- Tabs (mobile stacking), pricing, estimator, FAQ, contact, footer, nav */ /* Platform panes stack below 640px (JS adds .is-stacked and un-hides panes) */ @media (max-width:639px){ [data-sky-tabs].is-stacked .sky-tabs{display:none;} [data-sky-tabs].is-stacked .sky-pane{animation:none;margin-top:38px;} [data-sky-tabs].is-stacked .sky-pane:first-child{margin-top:0;} } /* Pricing: tablet orphan fix (900–1023px had a stranded third card) */ @media (min-width:900px) and (max-width:1023px){ .sky-plan:nth-child(3){grid-column:1 / -1;} } /* Estimator polish */ .sky-est__total{transition:color .25s var(--sky-ease);} /* FAQ: sprite chevron (border-chevron deleted above) + small-screen gutter */ .sky-faq__chev{margin-inline-start:auto;flex:none;margin-top:4px;color:var(--sky-ink-3); transition:transform .25s var(--sky-ease);} .sky-faq details[open] .sky-faq__chev{transform:rotate(180deg);color:var(--sky-blue-t);} @media (max-width:479px){.sky-faq__a{padding-inline-end:0;}} /* Contact: the conversion surface gets a real class (values identical to the old inline style at home 1069–1070) */ .sky-form-card{background:var(--sky-white);border:1px solid var(--sky-line); border-radius:var(--sky-r-lg);padding:clamp(24px,3vw,34px);box-shadow:none;} .sky-form-card__fields{display:flex;flex-direction:column;gap:16px;} .sky-form-card textarea.sk-input{height:auto;resize:vertical;} .sky-form-card__note{margin-top:10px;font-size:12.5px;color:var(--sky-ink-3);text-align:center;} /* The contact form's submit is an for common.js, so it needs the button box restated — appearance:none kills the UA chrome. */ .sky-form-card input[type="submit"].sky-btn{-webkit-appearance:none;appearance:none;} /* VERIFY PASS FIXES: the v2 widget is a fixed 304px iframe; 0.76 ≈ 230/304 card content width at 320px, so it no longer overflows the card. */ @media (max-width:379px){.sky-form-card .g-recaptcha{transform:scale(.76);transform-origin:top left;}} .sky-pt--wa .sky-ic{color:var(--sky-green-t);} .sky-btn:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:none;} /* Footer: demoted headings + the brand's best sentence */ .sky-foot__tag{font-size:13px;color:var(--sky-ink-inv-3);letter-spacing:.02em;} /* Nav: always-visible WhatsApp on mobile + scroll-spy state */ .sky-nav__wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none; height:46px;padding-inline:14px;border-radius:var(--sky-r-sm); background:var(--sky-blue-700);color:var(--sky-ink-inv);font-size:14px;font-weight:700;} .sky-nav__wa:hover{background:var(--sky-blue-t);color:var(--sky-ink-inv);} @media (max-width:479px){.sky-nav__wa{width:46px;padding-inline:0;}.sky-nav__wa span{display:none;}} /* VERIFY PASS FIXES: brand 196 + wa 46 + burger 46 + gaps needed 348px — overflowed at 320px */ /* 320px: shrink BOTH the legacy lockup and the HTML lockup. */ @media (max-width:479px){ .sky-nav__in{gap:12px;} .sky-nav__brand .sky-logo{gap:8px;} .sky-nav__brand .sky-logo__m{width:28px;height:28px;} .sky-nav__brand .sky-logo__w{font-size:20px;} } @media (min-width:1040px){.sky-nav__wa{display:none;}} .sky-nav__link.is-here{color:var(--sky-ink);} .sky-nav__link.is-here::after{content:"";position:absolute;inset-inline:14px;bottom:5px; height:2px;border-radius:2px;background:var(--sky-blue);} .sky-drawer__close{display:grid;place-items:center;} /* Button arrows are SVG now — flip them (and the hover nudge) in RTL */ [dir="rtl"] .sky-btn__arrow .sky-ic{transform:scaleX(-1);} [dir="rtl"] .sky-btn:hover .sky-btn__arrow{transform:translateX(-3px);} /* Touch devices: no sticky hover-lift states */ @media (hover:none){ .sky-role:hover,.sky-conn__card:hover,.sky-plan:hover{transform:none;} } /* Reduced-motion additions (extends the earlier reduce blocks) */ @media (prefers-reduced-motion:reduce){ .sky-live i{animation:none;} .sky-spark.is-arm .sky-spark__l{stroke-dashoffset:0;} } /* ========================================================================== MULTI-PAGE PRIMITIVES Added when the site went from one page to many. Everything above this line was written for the homepage and is largely bespoke per section: of the 31 grid-template-columns declarations in this file only .sky-tiles was count-agnostic, so a 14-item hub or a 4-item role grid had nothing to sit on. House rules these follow, same as the rest of the file: - every element-level rule is wrapped in :where() so it weighs (0,0,0) and cannot out-rank a component class; - structure is drawn with 1px rules, never shadows; - nothing exceeds the --sky-r-lg (16px) radius ceiling except pills. ========================================================================== */ /* ------------------------------------------------------- heading scale --- */ /* .sky-h2 and .sky-h3 already existed; feature pages and prose need one more step down for sub-section headings. */ .sky-h4{font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.35;font-weight:700;letter-spacing:-.015em;} /* --------------------------------------------------------- card grids --- */ /* The one grid that does not care how many children it has. This is what the features hub, the role pages, the compare hub and every "related pages" strip sit on. */ .sky-cards{ display:grid;gap:clamp(14px,1.6vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); margin-top:clamp(32px,4vw,48px); } .sky-cards--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));} .sky-cards--tight{gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));} .sky-card{ display:flex;flex-direction:column;gap:10px; padding:clamp(20px,2.2vw,26px); background:var(--sky-white);border:1px solid var(--sky-line); border-radius:var(--sky-r-lg); transition:border-color .18s,transform .18s; } .sky-card__ico{ width:38px;height:38px;display:grid;place-items:center;flex:none; border-radius:var(--sky-r);background:var(--sky-blue-50);color:var(--sky-blue-700); margin-bottom:4px; } .sky-card__ico :where(svg){width:19px;height:19px;} .sky-card__t{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.35;} .sky-card__d{font-size:14.5px;line-height:1.62;color:var(--sky-ink-2);} .sky-card__more{ margin-top:auto;padding-top:12px; font-size:13.5px;font-weight:700;color:var(--sky-blue-700); display:inline-flex;align-items:center;gap:7px; } .sky-card__more :where(svg){width:15px;height:15px;transition:transform .18s;} /* The whole card is the click target; the arrow is the affordance. */ a.sky-card:hover{border-color:var(--sky-line-ui);transform:translateY(-2px);} a.sky-card:hover .sky-card__more :where(svg){transform:translateX(3px);} /* ------------------------------------------------------- breadcrumbs --- */ .sky-crumbs{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; font-size:13px;font-weight:600;color:var(--sky-ink-3);margin-bottom:20px; } .sky-crumbs :where(a){color:var(--sky-ink-3);} .sky-crumbs :where(a):hover{color:var(--sky-blue-700);text-decoration:underline;text-underline-offset:2px;} .sky-crumbs__sep{color:var(--sky-ink-3);} /* --sky-ink-4 (#8A97AC) is 2.96:1 on white. The token is documented DECORATIVE ONLY, NEVER text, and a visible "/" is text — it failed 1.4.3 on every page that has a breadcrumb. --sky-ink-3 is 5.13:1 and still reads as recessive. */ .sky-crumbs [aria-current="page"]{color:var(--sky-ink);} /* ------------------------------------------------- inner-page hero --- */ /* Compact relative to .sky-hero: no ghost art plane, no three-column metric strip. An inner page has to get to its content fast. */ .sky-hero--page{ padding-block:clamp(36px,5vw,64px) clamp(32px,4vw,52px); border-bottom:1px solid var(--sky-line); background:var(--sky-white); } .sky-hero--page .sky-hero__in{display:block;} .sky-hero--page .sky-hero__copy{max-width:min(100%,880px);} /* The h1 gets the full measure — there is no art plane beside it on an inner page, so constraining it to a reading measure just left half the viewport empty. The lead keeps a real reading measure of its own. */ .sky-hero__h1{ font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;letter-spacing:-.035em;font-weight:800; /* Optical flush-left: the same negative em inset .sky-h1 carries. RTL zeroes it. */ margin-inline-start:-.045em; } [dir="rtl"] .sky-hero__h1{margin-inline-start:0;} .sky-hero--page .sky-lead{max-width:56ch;} .sky-hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;} /* ------------------------------------------------------------- prose --- */ /* Promoted out of the