/* ========================================================================= Airwind — main stylesheet Design tokens + components. No external deps. ~1 request, cache-friendly. ========================================================================= */ /* ---- Design tokens ---------------------------------------------------- */ :root { /* Airwind brand palette. --aw-primary = brand navy (#030E4F): links, eyebrows, dark UI, headings. --aw-lime = CTA gold (#FCBF01): button fills (paired with navy text). --aw-accent / --aw-tick = brand green (#00A300): tick marks / success. */ --aw-primary: #030E4F; /* navy — links, accents, dark sections */ --aw-primary-dark: #020A38; --aw-lime: #FCBF01; /* gold — CTA fill (variable name kept for stability) */ --aw-lime-dark: #E6AC00; --aw-tick: #00A300; /* green tick mark */ --aw-accent: #00A300; /* checks / success highlights */ --aw-ink: #05123F; /* headings (deep navy) */ /* Neutrals (cool) */ --aw-text: #3A4256; --aw-muted: #6B7280; --aw-border: #E3E6EF; --aw-bg: #F8F9FC; /* page background */ --aw-surface: #FFFFFF; /* cards */ --aw-surface-alt: #EEF1FA; /* alt sections (light navy tint) */ --aw-surface-dark: #030E4F; /* brand navy — dark sections / footer */ /* Gradients */ --aw-grad: linear-gradient(120deg, #0A1E7A 0%, var(--aw-primary) 100%); /* Typography */ --aw-display: "Bricolage Grotesque", "Arial Narrow", Impact, var(--aw-font); --aw-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --aw-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* Shadow (warm, soft) */ --sh-sm: 0 1px 2px rgba(35,38,26,.05), 0 1px 3px rgba(35,38,26,.05); --sh-md: 0 10px 30px rgba(35,38,26,.08); --sh-lg: 0 26px 60px rgba(35,38,26,.12); /* Layout */ --container: 1280px; --container-narrow: 820px; --gutter: clamp(1rem, 4vw, 2rem); /* Spacing scale */ --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem; --sp-5:4rem; --sp-6:6rem; --header-h: 76px; --aw-h-scale: 1; /* heading size multiplier (Customizer) */ --aw-header-bg: rgba(248,249,252,.85); } /* ---- Dark theme (opt-in via header toggle; sets data-theme on ) --- */ :root[data-theme="dark"] { --aw-primary: #9DB0FF; /* lighter navy-blue for links on dark */ --aw-primary-dark: #C3CEFF; --aw-ink: #F2F5FF; /* headings */ --aw-text: #C6CEE6; --aw-muted: #8F98B6; --aw-border: #263153; --aw-bg: #0A1024; --aw-surface: #131B34; --aw-surface-alt: #0E1731; --aw-surface-dark: #05091A; --aw-header-bg: rgba(10,16,36,.85); --sh-sm: 0 1px 2px rgba(0,0,0,.4); --sh-md: 0 10px 30px rgba(0,0,0,.45); --sh-lg: 0 26px 60px rgba(0,0,0,.55); } /* ---- Reset / base ----------------------------------------------------- */ *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--aw-font); font-size: 1.0625rem; line-height: 1.65; color: var(--aw-text); background: var(--aw-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img,svg,video { max-width: 100%; height: auto; display: block; } a { color: var(--aw-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--aw-primary-dark); } h1,h2,h3,h4,h5,h6 { font-family: var(--aw-display); color: var(--aw-ink); line-height: 1.05; letter-spacing: -.035em; margin: 0 0 .5em; font-weight: 700; text-wrap: balance; } h1 { font-size: calc(clamp(2.5rem, 5vw + 1rem, 4.75rem) * var(--aw-h-scale, 1)); } h2 { font-size: calc(clamp(1.9rem, 2.6vw + 1rem, 3rem) * var(--aw-h-scale, 1)); } h3 { font-size: calc(clamp(1.35rem, 1.1vw + 1rem, 1.75rem) * var(--aw-h-scale, 1)); letter-spacing: -.02em; } p { margin: 0 0 1rem; } ul,ol { margin: 0 0 1rem; padding-left: 1.25rem; } blockquote { margin: 0 0 1rem; } :focus-visible { outline: 3px solid var(--aw-primary); outline-offset: 2px; border-radius: 4px; } /* ---- Accessibility helpers ------------------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -60px; left: 8px; z-index: 1000; background: var(--aw-ink); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm); transition: top .2s; } .skip-link:focus { top: 8px; color: #fff; } /* ---- Layout ----------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: 1480px; } /* Full-width content — Elementor pages and the Full Width template stretch edge-to-edge; their own sections/containers control inner width. */ .site-content { width: 100%; } .entry-content--elementor, .entry-content--full { width: 100%; max-width: none; padding-inline: 0; } .page-template-template-fullwidth .site-main { width: 100%; } .section { padding-block: clamp(3rem, 6vw, 5.5rem); } .section--alt { background: var(--aw-surface-alt); } .section--dark { background: var(--aw-surface-dark); color: #C2CAE4; } .section--dark h2, .section--dark h3 { color: #fff; } .grid { display: grid; gap: 1.5rem; } .grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px){ .grid--3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px){ .grid--3 { grid-template-columns: 1fr; } } .section-head { max-width: 720px; margin: 0 auto clamp(2rem,4vw,3rem); text-align: center; } .section-head--row { display: flex; justify-content: space-between; align-items: end; gap: 1rem; text-align: left; max-width: none; } .section-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--aw-primary); margin: 0 0 .5rem; } .section-title { margin: 0 0 .5rem; } .section-lead { color: var(--aw-muted); font-size: 1.1rem; margin: 0; } .section-cta { text-align: center; margin-top: 2.5rem; } /* ---- Buttons ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; padding: .85rem 1.4rem; border-radius: var(--r-md); border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--lg { padding: 1.05rem 1.8rem; font-size: 1.05rem; } .btn--sm { padding: .55rem 1rem; font-size: .9rem; } .btn--block { display: flex; width: 100%; } .btn--primary { background: var(--aw-lime); color: #071033; } .btn--primary:hover { background: var(--aw-lime-dark); color: #071033; box-shadow: 0 8px 22px rgba(252,191,1,.5); } .btn--outline { background: transparent; color: var(--aw-ink); border-color: var(--aw-border); } .btn--outline:hover { border-color: var(--aw-ink); color: var(--aw-ink); background: color-mix(in srgb, var(--aw-ink) 6%, transparent); } .btn--light { background: var(--aw-lime); color: #071033; } .btn--light:hover { background: var(--aw-lime-dark); color: #071033; box-shadow: var(--sh-md); } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } .btn--ghost-light:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); } .btn--accent { background: var(--aw-ink); color: #fff; } .btn--accent:hover { background: #000; color: #fff; } .btn .icon { width: 18px; height: 18px; } .link-arrow { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; text-decoration: none; color: var(--aw-ink); } .link-arrow .icon { width: 18px; height: 18px; transition: transform .15s; } .link-arrow:hover { color: var(--aw-primary); } .link-arrow:hover .icon { transform: translateX(3px); } .pill { display: inline-block; font-size: .78rem; font-weight: 600; padding: .3rem .75rem; border-radius: var(--r-pill); background: rgba(3,14,79,.12); color: var(--aw-primary); text-decoration: none; } /* ---- Header ----------------------------------------------------------- */ .site-header { background: var(--aw-header-bg); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; } .has-sticky-header .site-header.is-stuck { border-bottom-color: var(--aw-border); } .has-sticky-header .site-header { position: sticky; top: 0; z-index: 100; } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); } .site-branding { display: flex; align-items: center; } .site-branding img, .custom-logo { max-height: 44px; width: auto; } .site-title { font-weight: 700; font-size: 1.25rem; color: var(--aw-ink); text-decoration: none; letter-spacing: -.02em; } .main-navigation { margin-left: auto; } .nav-menu { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; } .nav-menu a { display: block; padding: .6rem .85rem; color: var(--aw-ink); text-decoration: none; font-weight: 500; border-radius: var(--r-sm); font-size: .98rem; } .nav-menu a:hover, .nav-menu .current-menu-item > a { color: var(--aw-ink); background: rgba(3,14,79,.1); } .nav-menu .menu-item-has-children { position: relative; } .nav-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-md); box-shadow: var(--sh-lg); list-style: none; margin: .4rem 0 0; padding: .4rem; display: none; z-index: 50; } .nav-menu .sub-menu a { padding: .55rem .7rem; } .nav-menu .menu-item-has-children:hover > .sub-menu, .nav-menu .menu-item-has-children:focus-within > .sub-menu { display: block; } .site-header__actions { display: flex; align-items: center; gap: .6rem; } .header-phone { display: inline-flex; align-items: center; gap: .4rem; color: var(--aw-ink); text-decoration: none; font-weight: 600; font-size: .95rem; } .header-phone .icon { width: 18px; height: 18px; color: var(--aw-primary); } .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--aw-border); border-radius: var(--r-md); background: transparent; color: var(--aw-ink); cursor: pointer; transition: border-color .15s, background .15s; } .theme-toggle:hover { border-color: var(--aw-ink); } .theme-toggle__moon { display: none; } :root[data-theme="dark"] .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle__moon { display: block; } .menu-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; } .menu-toggle__bars { display: block; width: 24px; height: 16px; position: relative; } .menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--aw-ink); border-radius: 2px; transition: transform .2s, opacity .2s; } .menu-toggle__bars span:nth-child(1){ top: 0; } .menu-toggle__bars span:nth-child(2){ top: 7px; } .menu-toggle__bars span:nth-child(3){ top: 14px; } .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2){ opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1024px){ .header-phone { display: none; } .menu-toggle { display: inline-flex; order: 3; } /* hamburger sits far right */ .site-header__actions { margin-left: auto; } /* push actions to the right */ .main-navigation { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--aw-surface); border-bottom: 1px solid var(--aw-border); box-shadow: var(--sh-lg); max-height: 0; overflow: hidden; transition: max-height .28s ease; margin: 0; } .main-navigation.is-open { max-height: min(80vh, 600px); overflow-y: auto; } .nav-menu { flex-direction: column; padding: .75rem var(--gutter); gap: 0; } .nav-menu a { padding: .85rem .5rem; border-bottom: 1px solid var(--aw-border); border-radius: 0; } .nav-menu .sub-menu { position: static; display: block; box-shadow: none; border: 0; margin: 0 0 0 1rem; padding: 0; } .header-cta { display: inline-flex; padding: .6rem 1rem; font-size: .92rem; } /* keep CTA visible on mobile */ } @media (max-width: 420px){ .header-cta { padding: .55rem .8rem; font-size: .85rem; } .site-header__inner { gap: .5rem; } } /* ---- Hero ------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5.5rem); background: linear-gradient(180deg, #FBFBF7 0%, var(--aw-bg) 100%); } .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: center; } .hero__eyebrow { display: inline-block; font-weight: 600; font-size: .82rem; letter-spacing: .04em; color: var(--aw-primary); background: rgba(3,14,79,.12); padding: .4rem .85rem; border-radius: var(--r-pill); margin: 0 0 1.4rem; } .hero__title { font-size: clamp(3rem, 7vw + 1rem, 6rem); line-height: .95; letter-spacing: -.045em; margin: 0 0 1.4rem; color: var(--aw-ink); } .hero__title-accent { color: var(--aw-tick); } .hero__subtitle { font-size: 1.2rem; line-height: 1.5; color: var(--aw-muted); max-width: 40ch; margin: 0 0 1.9rem; } .hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 0; } .hero__trust li { display: inline-flex; align-items: center; gap: .4rem; color: var(--aw-muted); font-size: .95rem; font-weight: 500; } .hero__trust .icon { width: 18px; height: 18px; color: var(--aw-accent); } .hero__visual { position: relative; min-height: 340px; } .browser-mock { background: var(--aw-surface); border-radius: var(--r-xl); box-shadow: 0 30px 70px rgba(35,38,26,.18); border: 1px solid rgba(35,38,26,.06); overflow: hidden; transform: rotate(1.2deg); } .browser-mock__bar { display: flex; gap: 7px; padding: 13px 16px; background: var(--aw-surface-dark); } .browser-mock__bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.35); } .browser-mock__body { display: grid; grid-template-columns: 34% 1fr; gap: 14px; padding: 18px; } .browser-mock__side { display: grid; gap: 12px; align-content: start; background: var(--aw-surface-alt); border-radius: var(--r-md); padding: 16px; } .bm-chip { height: 22px; width: 60%; border-radius: 6px; background: var(--aw-ink); } .bm-line { height: 9px; border-radius: 5px; background: #DDE0D2; } .bm-line--short { width: 65%; } .browser-mock__main { display: grid; gap: 14px; align-content: start; } .bm-title { height: 26px; width: 55%; border-radius: 6px; background: var(--aw-ink); } .bm-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .bm-grid span { height: 74px; border-radius: var(--r-md); background: #EEF0E6; } .bm-grid .is-lime { background: rgba(252,191,1,.35); } .bm-actions { display: flex; align-items: center; gap: 14px; } .bm-btn { height: 40px; width: 130px; border-radius: var(--r-md); background: var(--aw-lime); } .bm-check { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,163,0,.15); color: var(--aw-tick); } .bm-check .icon { width: 22px; height: 22px; } .hero__toast { position: absolute; right: -6px; bottom: 18px; display: flex; align-items: center; gap: .7rem; background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: .8rem 1rem; max-width: 260px; } .hero__toast-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--aw-tick); box-shadow: 0 0 0 4px rgba(0,163,0,.28); flex: none; } .hero__toast-body { display: grid; } .hero__toast-body strong { color: var(--aw-ink); font-size: .92rem; font-family: var(--aw-display); } .hero__toast-body small { color: var(--aw-muted); font-size: .8rem; } @media (max-width: 860px){ .hero__inner { grid-template-columns: 1fr; } .hero__visual { display: none; } .hero__subtitle { max-width: none; } } /* ---- Stats ------------------------------------------------------------ */ .stats { padding-block: 2rem; border-bottom: 1px solid var(--aw-border); } .stats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; text-align: center; } .stats__value { display: block; font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 700; color: var(--aw-ink); letter-spacing: -.02em; } .stats__label { color: var(--aw-muted); font-size: .95rem; } @media (max-width: 620px){ .stats__grid { grid-template-columns: repeat(2,1fr); gap: 1.5rem; } } /* ---- Cards ------------------------------------------------------------ */ .card { background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: transform .18s, box-shadow .18s, border-color .18s; } .card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: #d4dbe8; } .service-card { padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem; } .service-card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md); background: rgba(3,14,79,.1); color: var(--aw-primary); } .service-card__icon .icon { width: 26px; height: 26px; } .service-card__title { margin: .3rem 0 0; font-size: 1.25rem; } .service-card__title a { color: var(--aw-ink); text-decoration: none; } .service-card__title a:hover { color: var(--aw-primary); } .service-card__text { color: var(--aw-muted); margin: 0; flex: 1; } .service-card .link-arrow { color: var(--aw-primary); margin-top: .4rem; } /* ---- Why ------------------------------------------------------------- */ .why-section__inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,5vw,3.5rem); align-items: center; } .why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .why-card { background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-md); padding: 1.3rem; } .why-card__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: rgba(3,14,79,.12); color: var(--aw-accent); margin-bottom: .6rem; } .why-card__icon .icon { width: 22px; height: 22px; } .why-card__title { font-size: 1.1rem; margin: 0 0 .25rem; } .why-card__text { color: var(--aw-muted); margin: 0; font-size: .95rem; } @media (max-width: 780px){ .why-section__inner { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr; } } /* ---- Process ---------------------------------------------------------- */ .process-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; counter-reset: step; } .process-step { position: relative; padding: 1.4rem; border: 1px solid var(--aw-border); border-radius: var(--r-md); background: var(--aw-surface); } .process-step__num { font-family: var(--aw-mono); font-size: 1.3rem; font-weight: 700; color: var(--aw-primary); } .process-step__title { margin: .3rem 0 .25rem; font-size: 1.15rem; } .process-step__text { color: var(--aw-muted); margin: 0; font-size: .95rem; } @media (max-width: 820px){ .process-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px){ .process-grid { grid-template-columns: 1fr; } } /* ---- Feature sections ------------------------------------------------- */ .feature-section__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; } .feature-section--reverse .feature-section__body { order: 2; } .feature-badge { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .9rem; color: var(--aw-primary); background: rgba(3,14,79,.1); padding: .4rem .8rem; border-radius: var(--r-pill); margin-bottom: 1rem; } .feature-badge--light { color: #fff; background: rgba(255,255,255,.14); } .feature-badge .icon { width: 18px; height: 18px; } .check-list { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; display: grid; gap: .6rem; } .check-list li { display: flex; align-items: flex-start; gap: .6rem; } .check-list .icon { width: 20px; height: 20px; color: var(--aw-accent); flex: none; margin-top: .15rem; } .check-list--light li { color: #C2CAE4; } .check-list--light .icon { color: var(--aw-tick); } .feature-mock { background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 1.5rem; } .feature-mock--web { display: grid; gap: .7rem; } .feature-mock__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #d7deea; margin-right: 6px; } .feature-mock__bar { height: 14px; border-radius: 6px; background: #eef1f7; } .feature-mock__bar--lg { height: 26px; width: 70%; background: var(--aw-grad); opacity: .85; } .feature-mock__bar--sm { width: 45%; } .feature-mock__cta { height: 40px; width: 140px; border-radius: var(--r-sm); background: var(--aw-primary); margin-top: .5rem; } .feature-mock--seo { background: transparent; border: 0; box-shadow: none; padding: 0; display: flex; align-items: flex-end; gap: .75rem; height: 240px; } .seo-bar { flex: 1; height: var(--h); background: rgba(255,255,255,.18); border-radius: 8px 8px 0 0; } .seo-bar--peak { background: var(--aw-lime); } @media (max-width: 820px){ .feature-section__inner { grid-template-columns: 1fr; } .feature-section--reverse .feature-section__body { order: 0; } .feature-mock--seo { height: 180px; } } /* ---- Testimonials ----------------------------------------------------- */ .testimonial-card { padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; } .testimonial-card__rating { display: flex; gap: 2px; color: var(--aw-lime); } .testimonial-card__rating .icon { width: 18px; height: 18px; } .testimonial-card__quote { font-size: 1.05rem; color: var(--aw-ink); margin: 0; } .testimonial-card__author { display: flex; align-items: center; gap: .75rem; } .testimonial-card__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .testimonial-card__avatar--placeholder { display: grid; place-items: center; background: var(--aw-grad); color: #fff; font-weight: 700; } .testimonial-card__name { display: block; font-weight: 700; color: var(--aw-ink); } .testimonial-card__role { display: block; font-size: .88rem; color: var(--aw-muted); } /* ---- Case cards ------------------------------------------------------- */ .case-card { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .case-card__media img { width: 100%; height: 180px; object-fit: cover; } .case-card__body { padding: 1.3rem; display: grid; gap: .3rem; } .case-card__result { font-size: 1.5rem; font-weight: 700; color: var(--aw-accent); } .case-card__title { font-weight: 700; color: var(--aw-ink); font-size: 1.1rem; } .case-card__meta { color: var(--aw-muted); font-size: .9rem; } /* ---- Pricing ---------------------------------------------------------- */ .pricing-grid { align-items: stretch; } .pricing-card { position: relative; background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-lg); padding: 2rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--sh-sm); } .pricing-card--featured { border-color: var(--aw-primary); box-shadow: var(--sh-lg); transform: translateY(-6px); } .pricing-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--aw-primary); color: #fff; font-size: .78rem; font-weight: 600; padding: .3rem .8rem; border-radius: var(--r-pill); } .pricing-card__name { font-size: 1.3rem; margin: 0; } .pricing-card__price { margin: 0; display: flex; align-items: baseline; gap: .4rem; } .pricing-card__amount { font-size: 2rem; font-weight: 700; color: var(--aw-ink); letter-spacing: -.02em; } .pricing-card__period { color: var(--aw-muted); font-size: .9rem; } .pricing-card__blurb { color: var(--aw-muted); margin: 0; } .pricing-card__features { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; flex: 1; } .pricing-card__features li { display: flex; gap: .5rem; align-items: flex-start; font-size: .95rem; } .pricing-card__features .icon { width: 18px; height: 18px; color: var(--aw-accent); flex: none; margin-top: .2rem; } .pricing-note { text-align: center; color: var(--aw-muted); font-size: .92rem; margin-top: 1.5rem; } .pricing-compare__wrap { overflow-x: auto; border: 1px solid var(--aw-border); border-radius: var(--r-lg); background: var(--aw-surface); } .pricing-compare { width: 100%; border-collapse: collapse; min-width: 640px; } .pricing-compare th, .pricing-compare td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--aw-border); } .pricing-compare thead th { font-family: var(--aw-display); color: var(--aw-ink); font-size: 1.05rem; } .pricing-compare tbody th { font-weight: 600; color: var(--aw-ink); } .pricing-compare td { text-align: center; color: var(--aw-text); } .pricing-compare td:first-child, .pricing-compare th:first-child { text-align: left; } .pricing-compare tbody tr:last-child th, .pricing-compare tbody tr:last-child td { border-bottom: 0; } .pricing-compare .icon { width: 20px; height: 20px; color: var(--aw-tick); } .pricing-compare__dash { color: var(--aw-muted); } .pricing-compare thead th:nth-child(3) { background: rgba(252,191,1,.12); border-radius: 10px 10px 0 0; } /* ---- FAQ -------------------------------------------------------------- */ .faq__title { text-align: center; } .faq__list { display: grid; gap: .75rem; } /* inline content figures (service/blog images) */ .entry-content .aw-figure, .entry-content figure { margin: 1.75rem 0; } .entry-content .aw-figure img, .entry-content figure img { width: 100%; border-radius: var(--r-lg); } .entry-content figcaption, .wp-element-caption { text-align: center; color: var(--aw-muted); font-size: .9rem; margin-top: .5rem; } .service-hero-image { margin-top: 1.5rem; } .faq__item { background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-md); padding: 0 1.2rem; } .faq__q { cursor: pointer; font-weight: 600; color: var(--aw-ink); padding: 1.1rem 0; list-style: none; position: relative; padding-right: 2rem; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--aw-primary); line-height: 1; } .faq__item[open] .faq__q::after { content: "\2013"; } .faq__a { padding: 0 0 1.1rem; color: var(--aw-muted); } .faq__a p { margin: 0; } /* ---- CTA band --------------------------------------------------------- */ .cta-band { background: var(--aw-surface-dark); color: #fff; position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(252,191,1,.2), transparent 70%); pointer-events: none; } .cta-band__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: clamp(2.5rem,5vw,4rem); } .cta-band__title { color: #fff; margin: 0 0 .4rem; } .cta-band__text { margin: 0; color: rgba(255,255,255,.78); max-width: 46ch; } .cta-band__actions { display: flex; gap: .75rem; flex-wrap: wrap; } .cta-band--compact .cta-band__inner { padding-block: 2rem; } @media (max-width: 780px){ .cta-band__inner { flex-direction: column; align-items: flex-start; text-align: left; } } .inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--aw-surface-alt); border: 1px solid var(--aw-border); border-left: 4px solid var(--aw-primary); border-radius: var(--r-md); padding: 1.4rem 1.5rem; margin: 2rem 0; } .inline-cta__title { font-weight: 700; color: var(--aw-ink); margin: 0 0 .2rem; } .inline-cta__text { margin: 0; color: var(--aw-muted); font-size: .95rem; } .inline-cta .btn { flex: none; } @media (max-width: 640px){ .inline-cta { flex-direction: column; align-items: flex-start; } } /* ---- Blog list / cards ------------------------------------------------ */ .page-header { padding-block: clamp(2rem,4vw,3rem); } .page-header--blog { text-align: center; } .page-header__title { margin: 0; } .page-header__intro { color: var(--aw-muted); font-size: 1.1rem; max-width: 60ch; margin: .5rem auto 0; } .post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; } .post-grid--3 { grid-template-columns: repeat(3,1fr); } @media (max-width: 900px){ .post-grid, .post-grid--3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px){ .post-grid, .post-grid--3 { grid-template-columns: 1fr; } } .post-card { overflow: hidden; display: flex; flex-direction: column; } .post-card__media { display: block; overflow: hidden; } .post-card__media img { width: 100%; height: 200px; object-fit: cover; transition: transform .4s; } .post-card:hover .post-card__media img { transform: scale(1.04); } .post-card__body { padding: 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; } .post-card__cat { align-self: flex-start; } .post-card__title { font-size: 1.2rem; margin: 0; } .post-card__title a { color: var(--aw-ink); text-decoration: none; } .post-card__title a:hover { color: var(--aw-primary); } .post-card__excerpt { color: var(--aw-muted); font-size: .95rem; margin: 0; flex: 1; } .post-card__meta { color: var(--aw-muted); font-size: .85rem; display: flex; gap: .4rem; align-items: center; } /* ---- Blog toolbar ----------------------------------------------------- */ .blog-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 0 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--aw-border); } .blog-toolbar__filters { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { border: 1px solid var(--aw-border); background: var(--aw-surface); color: var(--aw-text); padding: .45rem .9rem; border-radius: var(--r-pill); font-size: .9rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: all .15s; } .chip:hover { border-color: var(--aw-primary); color: var(--aw-primary); } .chip.is-active { background: var(--aw-primary); border-color: var(--aw-primary); color: #fff; } .blog-toolbar__sort { margin-left: auto; } .sort-links { display: inline-flex; gap: .25rem; background: var(--aw-surface-alt); padding: .25rem; border-radius: var(--r-pill); } .sort-link { padding: .4rem .85rem; border-radius: var(--r-pill); font-size: .88rem; font-weight: 500; color: var(--aw-muted); text-decoration: none; } .sort-link.is-active { background: var(--aw-surface); color: var(--aw-ink); box-shadow: var(--sh-sm); } .blog-toolbar__search { display: flex; position: relative; } .blog-toolbar__search input { border: 1px solid var(--aw-border); border-radius: var(--r-pill); padding: .55rem 2.4rem .55rem 1rem; font: inherit; font-size: .92rem; min-width: 200px; } .blog-toolbar__search button { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: var(--aw-muted); padding: .3rem; } .blog-toolbar__search .icon { width: 18px; height: 18px; } @media (max-width: 700px){ .blog-toolbar__sort, .blog-toolbar__search { margin-left: 0; width: 100%; } .blog-toolbar__search input { flex: 1; width: 100%; } } .post-card.is-hidden { display: none; } /* ---- Single article + TOC -------------------------------------------- */ .article-head { padding-block: clamp(1.5rem,3vw,2.5rem) 1rem; max-width: var(--container-narrow); } .article-title { margin: .5rem 0; } .article-standfirst { font-size: 1.25rem; color: var(--aw-muted); margin: 0 0 1rem; } .entry-categories { display: flex; gap: .4rem; flex-wrap: wrap; } .entry-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--aw-muted); font-size: .92rem; margin-top: .5rem; } .entry-meta a { color: var(--aw-muted); } .article-hero { margin: 1.5rem auto 0; max-width: 900px; padding-inline: var(--gutter); } .article-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); } .article-layout { display: block; padding-top: 2.5rem; padding-bottom: 3rem; } .article-layout--toc { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: clamp(2rem,5vw,4rem); align-items: start; } .article-main { min-width: 0; max-width: 760px; } .article-layout--full .article-main { margin-inline: auto; } .article-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; } .toc--desktop { border: 1px solid var(--aw-border); border-radius: var(--r-md); padding: 1.2rem; max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; } .toc__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--aw-muted); font-weight: 700; margin: 0 0 .75rem; } .toc__list, .toc__sublist { list-style: none; margin: 0; padding: 0; } .toc__sublist { padding-left: .9rem; margin-top: .2rem; } .toc__link { display: block; padding: .3rem .5rem; color: var(--aw-muted); text-decoration: none; font-size: .92rem; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; line-height: 1.4; transition: color .15s, border-color .15s, background .15s; } .toc__link:hover { color: var(--aw-primary); } .toc__link.is-active { color: var(--aw-primary); border-left-color: var(--aw-primary); background: rgba(3,14,79,.08); font-weight: 600; } .toc__item--h4 .toc__link { font-size: .86rem; } .toc--mobile { display: none; border: 1px solid var(--aw-border); border-radius: var(--r-md); margin-bottom: 1.5rem; padding: 0 1rem; } .toc--mobile > .toc__title { cursor: pointer; padding: 1rem 0; margin: 0; } .toc--mobile[open] > .toc__title { border-bottom: 1px solid var(--aw-border); margin-bottom: .5rem; } .toc--mobile .toc__nav { padding-bottom: 1rem; } @media (max-width: 1000px){ .article-layout--toc { grid-template-columns: 1fr; } .article-aside { display: none; } .toc--mobile { display: block; } .article-main { max-width: none; } } /* ---- Article content typography -------------------------------------- */ .article-content { font-size: 1.12rem; } .article-content > * { margin-bottom: 1.3rem; } .article-content h2 { margin-top: 2.5rem; } .article-content h3 { margin-top: 1.8rem; } .article-content :is(h2,h3,h4) { scroll-margin-top: calc(var(--header-h) + 1rem); } .article-content img { border-radius: var(--r-md); } .article-content blockquote { border-left: 4px solid var(--aw-primary); padding: .5rem 0 .5rem 1.25rem; color: var(--aw-ink); font-size: 1.2rem; font-style: italic; } .article-content pre { background: var(--aw-ink); color: #E6EDF7; padding: 1.1rem 1.25rem; border-radius: var(--r-md); overflow-x: auto; font-family: var(--aw-mono); font-size: .92rem; } .article-content code { font-family: var(--aw-mono); font-size: .92em; background: var(--aw-surface-alt); padding: .15em .4em; border-radius: 4px; } .article-content pre code { background: none; padding: 0; } .article-content ul, .article-content ol { padding-left: 1.4rem; } .article-content li { margin-bottom: .4rem; } .entry-tags { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .entry-tags__label { font-weight: 600; color: var(--aw-ink); margin-right: .3rem; } .entry-tags a { font-size: .85rem; color: var(--aw-muted); text-decoration: none; border: 1px solid var(--aw-border); padding: .25rem .7rem; border-radius: var(--r-pill); } .entry-tags a:hover { border-color: var(--aw-primary); color: var(--aw-primary); } /* ---- Author box + post nav ------------------------------------------- */ .author-box { display: flex; gap: 1.25rem; background: var(--aw-surface-alt); border: 1px solid var(--aw-border); border-radius: var(--r-lg); padding: 1.5rem; margin: 2.5rem 0; } .author-box__avatar img { border-radius: 50%; } .author-box__eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; color: var(--aw-muted); margin: 0; font-weight: 700; } .author-box__name { margin: .1rem 0 .4rem; font-size: 1.2rem; } .author-box__name a { text-decoration: none; color: var(--aw-ink); } .author-box__bio { margin: 0; color: var(--aw-muted); } .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; } .post-nav__link { border: 1px solid var(--aw-border); border-radius: var(--r-md); padding: 1rem 1.2rem; text-decoration: none; display: grid; gap: .2rem; transition: border-color .15s; } .post-nav__link:hover { border-color: var(--aw-primary); } .post-nav__next { text-align: right; } .post-nav__dir { font-size: .82rem; color: var(--aw-muted); } .post-nav__title { font-weight: 600; color: var(--aw-ink); } @media (max-width: 640px){ .post-nav { grid-template-columns: 1fr; } .post-nav__next { text-align: left; } } .related-services { padding-block: clamp(2rem,4vw,3rem); } .related-services__title { font-size: 1.4rem; margin: 0 0 1rem; } .related-services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; } .related-services__item { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; border: 1px solid var(--aw-border); border-radius: var(--r-md); background: var(--aw-surface); text-decoration: none; color: var(--aw-ink); font-weight: 600; transition: border-color .15s, transform .15s; } .related-services__item:hover { border-color: var(--aw-primary); transform: translateY(-2px); } .related-services__item > .icon:last-child { margin-left: auto; color: var(--aw-primary); } .related-services__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: rgba(3,14,79,.08); color: var(--aw-primary); flex: none; } .related-services__icon .icon { width: 20px; height: 20px; } .related-services__name { flex: 1; } @media (max-width: 700px){ .related-services__grid { grid-template-columns: 1fr; } } .related-posts { background: var(--aw-surface-alt); border-top: 1px solid var(--aw-border); padding-block: clamp(2.5rem,5vw,4rem); } /* ---- Breadcrumbs ------------------------------------------------------ */ .breadcrumbs { margin-bottom: 1rem; font-size: .88rem; } .breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; } .breadcrumbs__item { display: flex; align-items: center; gap: .35rem; color: var(--aw-muted); } .breadcrumbs__item:not(:last-child)::after { content: "/"; color: var(--aw-border); } .breadcrumbs a { color: var(--aw-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--aw-primary); } .breadcrumbs [aria-current="page"] { color: var(--aw-ink); font-weight: 500; } /* ---- Pagination ------------------------------------------------------- */ .pagination { margin: 3rem 0 1rem; } .pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .5rem; border: 1px solid var(--aw-border); border-radius: var(--r-sm); color: var(--aw-ink); text-decoration: none; font-weight: 500; } .pagination .page-numbers:hover { border-color: var(--aw-primary); color: var(--aw-primary); } .pagination .page-numbers.current { background: var(--aw-primary); border-color: var(--aw-primary); color: #fff; } /* ---- Page hero (services/pricing/etc.) ------------------------------- */ .page-hero, .contact-hero { padding-block: clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem); background: radial-gradient(900px 400px at 90% -20%, rgba(3,14,79,.1), transparent 60%); } .page-hero__title, .contact-hero__title { margin: .5rem 0 .5rem; } .page-hero__lead, .contact-hero__lead { color: var(--aw-muted); font-size: 1.15rem; max-width: 60ch; } .page-hero--service .page-hero__lead { margin-bottom: 1.25rem; } /* ---- Contact page ----------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(2rem,5vw,3rem); align-items: start; } .contact-form-panel { background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: clamp(1.5rem,3vw,2.25rem); } .contact-info { position: sticky; top: calc(var(--header-h) + 1.5rem); } .contact-info__title { font-size: 1.3rem; } .contact-info__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; } .contact-info__list li { display: flex; gap: .75rem; align-items: flex-start; } .contact-info__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: rgba(3,14,79,.1); color: var(--aw-primary); } .contact-info__icon .icon { width: 20px; height: 20px; } .contact-info a { color: var(--aw-text); text-decoration: none; } .contact-info a:hover { color: var(--aw-primary); } .contact-map { margin-top: 3rem; } .contact-map iframe { display: block; } @media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } .contact-info { position: static; } } /* ---- Forms ------------------------------------------------------------ */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px){ .form-row { grid-template-columns: 1fr; } } .form-field { margin: 0 0 1rem; display: grid; gap: .35rem; } .form-field label { font-weight: 600; color: var(--aw-ink); font-size: .92rem; } .form-field .req { color: #E5484D; } .contact-form input, .contact-form select, .contact-form textarea, .search-form__field { width: 100%; font: inherit; font-size: 1rem; color: var(--aw-ink); padding: .75rem .9rem; border: 1px solid var(--aw-border); border-radius: var(--r-sm); background: var(--aw-surface); transition: border-color .15s, box-shadow .15s; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--aw-primary); box-shadow: 0 0 0 3px rgba(3,14,79,.18); } .form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; } .form-privacy { color: var(--aw-muted); font-size: .85rem; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-notice { border-radius: var(--r-md); padding: 1rem 1.2rem; margin-bottom: 1.5rem; } .form-notice--success { background: rgba(3,14,79,.1); border: 1px solid rgba(3,14,79,.4); } .form-notice--error { background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.35); } .form-notice p { margin: .2rem 0 0; } .search-form { display: flex; gap: .5rem; max-width: 480px; } .search-form__submit { flex: none; } /* ---- Footer ----------------------------------------------------------- */ .site-footer { background: var(--aw-surface-dark); color: #97A0C0; padding-block: clamp(3rem,5vw,4rem) 2rem; } .site-footer a { color: #D3D9EC; text-decoration: none; } .site-footer a:hover { color: #fff; } .site-footer__grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.4fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); } .site-footer__col--contact .btn { margin-top: 1rem; } @media (max-width: 1000px){ .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } } .site-footer__brand .custom-logo { filter: brightness(0) invert(1); } .site-title--footer { color: #fff; font-weight: 700; font-size: 1.3rem; } .site-footer__about { margin: 1rem 0 1.25rem; font-size: .95rem; max-width: 40ch; } .site-footer__heading { color: #fff; font-size: 1rem; margin: 0 0 1rem; } .footer-menu, .footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .footer-contact li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; } .footer-contact .icon { width: 18px; height: 18px; color: var(--aw-primary); flex: none; margin-top: .2rem; } .site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.5rem; flex-wrap: wrap; } .site-footer__copyright { margin: 0; font-size: .9rem; } .legal-menu__list { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; font-size: .9rem; } @media (max-width: 820px){ .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; } } .social-links { list-style: none; display: flex; gap: .6rem; margin: 0; padding: 0; } .social-links a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: #D3D9EC; } .social-links a:hover { background: var(--aw-lime); color: var(--aw-ink); } .footer-contact .icon { color: var(--aw-lime); } .social-links .icon { width: 20px; height: 20px; } .contact-info .social-links a { background: var(--aw-surface-alt); color: var(--aw-primary); } /* ---- 404 -------------------------------------------------------------- */ .error-404 { text-align: center; padding-block: clamp(3rem,8vw,6rem); max-width: 620px; margin-inline: auto; } .error-404__code { font-size: clamp(4rem,12vw,7rem); font-weight: 700; color: var(--aw-primary); line-height: 1; margin: 0; letter-spacing: -.04em; } .error-404__title { margin: .5rem 0; } .error-404__text { color: var(--aw-muted); font-size: 1.1rem; } .error-404 .search-form { margin: 1.5rem auto; } .error-404__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; } /* ---- Case study meta -------------------------------------------------- */ .case-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 0; margin: 1rem 0 0; } .case-meta li { display: grid; gap: .1rem; } .case-meta span { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--aw-muted); } .case-meta strong { color: var(--aw-ink); font-size: 1.1rem; } .case-hero-image { margin-top: 2rem; } .case-hero-image img { border-radius: var(--r-lg); width: 100%; } /* ---- Widgets ---------------------------------------------------------- */ .widget { margin-bottom: 1.5rem; } .widget__title { font-size: 1.05rem; } /* ---- Reduced motion --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .btn:hover, .card:hover, .post-card:hover .post-card__media img { transform: none; } }