/* ========================================================================== Adam's Premier Property Services — core stylesheet Brand: #186C9B (ocean blue) · #7AC142 (green) — sampled from the logo Type: Agenda (licensed, self-host if available) → Barlow fallback ========================================================================== */ /* ---- 1. Self-hosted Agenda ----------------------------------------------- Drop Agenda web fonts into /assets/fonts/ and these rules pick them up automatically. Until then every page falls back to Barlow, which shares Agenda's tall x-height and slightly narrow humanist grotesque proportions. -------------------------------------------------------------------------- */ /* ACTIVATE AGENDA: drop the four .woff2 files into /assets/fonts/ using the exact filenames below, then delete this line and the closing marker. Left commented out so the live site makes zero failed font requests. @font-face{font-family:"Agenda";src:url("../fonts/Agenda-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Agenda";src:url("../fonts/Agenda-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Agenda";src:url("../fonts/Agenda-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Agenda";src:url("../fonts/Agenda-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} */ /* ---- 2. Tokens ---------------------------------------------------------- */ :root{ /* brand */ --blue:#186C9B; --blue-dark:#125479; --blue-tint:#E7F0F6; --green:#7AC142; --green-dark:#5FA02E; /* palm beach neutrals */ --navy:#0A2C40; --navy-deep:#06202F; --ink:#102530; --body:#4C6675; --sand:#F7F2E8; --sand-deep:#EFE6D6; --paper:#FFFFFF; /* lines & shadow */ --line:rgba(16,37,48,.13); --line-soft:rgba(16,37,48,.07); --line-light:rgba(255,255,255,.18); --shadow-sm:0 1px 2px rgba(6,32,47,.06), 0 4px 12px rgba(6,32,47,.05); --shadow-md:0 2px 4px rgba(6,32,47,.05), 0 12px 32px rgba(6,32,47,.09); --shadow-lg:0 4px 8px rgba(6,32,47,.05), 0 24px 60px rgba(6,32,47,.14); /* type */ --ff:"Agenda","Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; /* rhythm */ --gutter:clamp(1.25rem,5vw,2.5rem); --maxw:1240px; --maxw-narrow:820px; --section-y:clamp(4rem,9vw,8rem); --r:3px; /* restrained radius reads more architectural */ --r-lg:6px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---- 3. Reset ----------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px; /* clip, not hidden: `hidden` on would kill position:sticky on the header. Backs up body's overflow-x for the off-canvas nav drawer. */ overflow-x:clip; } body{ margin:0; font-family:var(--ff); font-weight:400; font-size:clamp(1rem,.96rem + .2vw,1.0625rem); line-height:1.7; color:var(--body); background:var(--paper); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,video{max-width:100%;height:auto;display:block} a{color:var(--blue);text-decoration:none;transition:color .2s var(--ease)} a:hover{color:var(--blue-dark)} button{font:inherit;color:inherit} ul,ol{margin:0;padding:0} h1,h2,h3,h4,h5,p,figure{margin:0} :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px} ::selection{background:var(--blue);color:#fff} /* ---- 4. Typography ------------------------------------------------------ */ h1,h2,h3,h4,.eyebrow,.stat-n,.btn,.nav-link{color:var(--ink);font-weight:500} h1,h2,h3,h4{line-height:1.08;letter-spacing:-.005em} .display{ font-size:clamp(2.5rem,1.6rem + 4.4vw,5rem); font-weight:500;line-height:1.02;letter-spacing:-.02em; } h1,.h1{font-size:clamp(2.25rem,1.6rem + 3.2vw,4rem);letter-spacing:-.018em;line-height:1.05} h2,.h2{font-size:clamp(1.875rem,1.4rem + 2.1vw,3rem);letter-spacing:-.014em;line-height:1.1} h3,.h3{font-size:clamp(1.25rem,1.13rem + .55vw,1.625rem);letter-spacing:-.008em;line-height:1.2} h4,.h4{font-size:1.0625rem;letter-spacing:.01em;line-height:1.35} .eyebrow{ display:block; font-size:.6875rem;font-weight:600; letter-spacing:.22em;text-transform:uppercase; color:var(--blue); margin-bottom:1.25rem; } .eyebrow--light{color:var(--green)} .eyebrow--rule{display:flex;align-items:center;gap:.9rem} .eyebrow--rule::after{content:"";flex:1;height:1px;background:currentColor;opacity:.32;max-width:80px} .lead{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.65} .tight{max-width:62ch} .tighter{max-width:52ch} .muted{color:var(--body)} .center{text-align:center} .center .tight,.center .tighter,.center .lead{margin-inline:auto} /* ---- 5. Layout ---------------------------------------------------------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .wrap--narrow{max-width:var(--maxw-narrow)} .section{padding-block:var(--section-y)} .section--tight{padding-block:clamp(3rem,6vw,5rem)} .section--sand{background:var(--sand)} .section--tint{background:var(--blue-tint)} .section--navy{background:var(--navy);color:rgba(255,255,255,.74)} .section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4,.section--navy .stat-n{color:#fff} .section--navy a{color:#fff} .grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)} .grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .section-head{margin-bottom:clamp(2.5rem,5vw,4rem)} .section-head .lead{margin-top:1.25rem} .hr{height:1px;background:var(--line);border:0;margin:0} /* ---- 6. Buttons --------------------------------------------------------- */ .btn{ --btn-bg:var(--blue);--btn-fg:#fff;--btn-bd:var(--blue); display:inline-flex;align-items:center;justify-content:center;gap:.6rem; min-height:52px;padding:.85rem 1.85rem; background:var(--btn-bg);color:var(--btn-fg); border:1px solid var(--btn-bd);border-radius:var(--r); font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; cursor:pointer;text-align:center; transition:background-color .22s var(--ease),border-color .22s var(--ease), color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease); } .btn:hover{--btn-bg:var(--blue-dark);--btn-bd:var(--blue-dark);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn:active{transform:translateY(0);box-shadow:none} .btn--green{--btn-bg:var(--green);--btn-bd:var(--green);--btn-fg:#0A2C40} .btn--green:hover{--btn-bg:var(--green-dark);--btn-bd:var(--green-dark);color:#0A2C40} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)} .btn--ghost:hover{--btn-bg:var(--ink);--btn-bd:var(--ink);color:#fff} .btn--on-dark{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:var(--line-light)} .btn--on-dark:hover{--btn-bg:#fff;--btn-bd:#fff;color:var(--navy)} .btn--block{display:flex;width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:.875rem} .center .btn-row{justify-content:center} .textlink{ display:inline-flex;align-items:center;gap:.5rem; font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--blue); } .textlink svg{transition:transform .25s var(--ease)} .textlink:hover svg{transform:translateX(4px)} /* ---- 7. Header ---------------------------------------------------------- */ .topbar{ background:var(--navy-deep);color:rgba(255,255,255,.66); font-size:.75rem;letter-spacing:.1em;text-transform:uppercase; } .topbar-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:40px;flex-wrap:wrap} .topbar a{color:rgba(255,255,255,.86);font-weight:500} .topbar a:hover{color:var(--green)} .topbar-note{display:flex;align-items:center;gap:.5rem} .topbar-note svg{flex:none;color:var(--green)} .topbar-links{display:flex;gap:1.5rem;align-items:center} .site-header{ position:sticky;top:0;z-index:60; background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line-soft); transition:box-shadow .25s var(--ease); } .site-header.is-stuck{box-shadow:var(--shadow-sm)} .header-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:78px} .brand{flex:none;display:block} .brand img{width:auto;height:clamp(34px,6.2vw,46px)} .nav{display:flex;align-items:center;gap:clamp(1.15rem,1.6vw,1.6rem)} .nav-link{ position:relative;padding:.4rem 0; font-size:.73rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--ink);white-space:nowrap; } .nav-link::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--green);transition:right .3s var(--ease); } .nav-link:hover::after,.nav-link[aria-current="page"]::after{right:0} .nav-link[aria-current="page"]{color:var(--blue)} .nav-close{display:none} .nav > .btn{display:none} /* drawer CTA — mobile only */ .header-cta{display:flex;align-items:center;gap:1rem} /* A wrapped header CTA pushes the whole header taller — never let it break. */ .header-cta .btn{white-space:nowrap;padding-inline:1.4rem} .header-phone{ display:inline-flex;align-items:center;gap:.5rem; font-size:.95rem;font-weight:600;letter-spacing:.02em;color:var(--ink); white-space:nowrap; } .header-phone svg{color:var(--blue)} .header-phone:hover{color:var(--blue)} .nav-toggle{ display:none;width:48px;height:48px;margin-right:-10px; align-items:center;justify-content:center; background:none;border:0;cursor:pointer;color:var(--ink); } .nav-toggle span{position:relative;display:block;width:24px;height:2px;background:currentColor;transition:background .2s var(--ease)} .nav-toggle span::before,.nav-toggle span::after{ content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor; transition:transform .28s var(--ease),top .28s var(--ease); } .nav-toggle span::before{top:-7px} .nav-toggle span::after{top:7px} body.nav-open .nav-toggle span{background:transparent} body.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)} body.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)} .nav-scrim{ position:fixed;inset:0;z-index:55; background:rgba(6,32,47,.5); opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s; } body.nav-open .nav-scrim{opacity:1;visibility:visible} /* ---- 8. Hero ------------------------------------------------------------ */ .hero{position:relative;isolation:isolate;background:var(--navy-deep);color:#fff;overflow:hidden} .hero-media{position:absolute;inset:0;z-index:-2} .hero-media img{width:100%;height:100%;object-fit:cover} .hero-scrim{ position:absolute;inset:0;z-index:-1; background: linear-gradient(180deg,rgba(6,32,47,.62) 0%,rgba(6,32,47,.42) 42%,rgba(6,32,47,.86) 100%), linear-gradient(90deg,rgba(6,32,47,.72) 0%,rgba(6,32,47,.18) 68%); } .hero-in{position:relative;padding-block:clamp(5rem,14vw,10.5rem);max-width:760px} .hero h1,.hero .display{color:#fff;text-wrap:balance} .hero .lead{color:rgba(255,255,255,.86);margin-top:1.75rem;max-width:56ch} .hero .btn-row{margin-top:2.5rem} .hero .eyebrow{color:var(--green)} .hero-marks{ display:flex;flex-wrap:wrap;gap:.6rem 1.75rem; margin-top:3rem;padding-top:1.75rem; border-top:1px solid var(--line-light); font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.84); } .hero-marks li{display:flex;align-items:center;gap:.55rem;list-style:none} .hero-marks svg{flex:none;color:var(--green)} /* compact page hero for interior pages */ .pagehero{position:relative;isolation:isolate;background:var(--navy);color:#fff;overflow:hidden} .pagehero-media{position:absolute;inset:0;z-index:-2} .pagehero-media img{width:100%;height:100%;object-fit:cover;opacity:.42} .pagehero::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(6,32,47,.72),rgba(6,32,47,.9)); } .pagehero-in{padding-block:clamp(3.5rem,9vw,6.5rem);max-width:720px} .pagehero h1{color:#fff;text-wrap:balance} .pagehero .lead{color:rgba(255,255,255,.82);margin-top:1.25rem} .crumbs{ display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem; font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6); } .crumbs a{color:rgba(255,255,255,.86)} .crumbs a:hover{color:var(--green)} .crumbs li{list-style:none;display:flex;gap:.5rem;align-items:center} .crumbs li+li::before{content:"/";opacity:.45} /* ---- 9. Trust strip ----------------------------------------------------- */ .trust{border-bottom:1px solid var(--line-soft);background:var(--paper)} .trust-in{ display:grid;gap:0; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); } .trust-item{ display:flex;align-items:flex-start;gap:.9rem; padding:2rem clamp(1rem,2.4vw,2rem); border-right:1px solid var(--line-soft); } .trust-item:last-child{border-right:0} .trust-item svg{flex:none;color:var(--blue);margin-top:2px} .trust-item h4{margin-bottom:.15rem} .trust-item p{font-size:.9375rem;line-height:1.5;margin:0} /* ---- 10. Cards ---------------------------------------------------------- */ .card{ position:relative;display:flex;flex-direction:column; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden; transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease); } .card:hover{border-color:rgba(24,108,155,.4);box-shadow:var(--shadow-md);transform:translateY(-3px)} .card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand-deep)} .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .card:hover .card-media img{transform:scale(1.05)} .card-num{ position:absolute;left:0;bottom:0;z-index:2; padding:.45rem 1rem;background:var(--navy);color:#fff; font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; } .card-body{display:flex;flex-direction:column;flex:1;padding:clamp(1.5rem,2.6vw,2rem)} .card-body h3{margin-bottom:.75rem} .card-body p{font-size:.9688rem;margin-bottom:1.25rem} .card-list{margin:0 0 1.5rem;display:grid;gap:.5rem} .card-list li{ display:flex;gap:.6rem;align-items:flex-start;list-style:none; font-size:.9063rem;line-height:1.5; } .card-list svg{flex:none;color:var(--green);margin-top:5px} .card-body .textlink{margin-top:auto} /* ---- 10b. Secondary service tiles -------------------------------------- Deliberately lighter than .card so the four core services keep the visual hierarchy on the homepage. */ .mini-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} @media (min-width:560px){.mini-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:900px){.mini-grid{grid-template-columns:repeat(3,1fr)}} .mini{ display:flex;flex-direction:column;gap:.4rem; padding:clamp(1.35rem,2.2vw,1.75rem); background:var(--paper); transition:background-color .25s var(--ease); } .mini:hover{background:var(--sand)} .mini h3{font-size:1.0625rem;letter-spacing:-.003em} .mini p{font-size:.9063rem;line-height:1.55;margin:0} .mini .tag{ font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--blue);margin-bottom:.15rem; } a.mini{color:inherit} a.mini h3{transition:color .2s var(--ease)} a.mini:hover h3{color:var(--blue)} /* Two-column service-area grouping (South PBC / North Broward) */ .area-group+.area-group{margin-top:2rem} .area-group h4{ font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--green);margin-bottom:1rem; } /* ---- 11. Split feature -------------------------------------------------- */ .split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;grid-template-columns:1fr} @media (min-width:900px){ .split{grid-template-columns:1fr 1fr} .split--wide-left{grid-template-columns:1.15fr .85fr} .split--wide-right{grid-template-columns:.85fr 1.15fr} .split--flip .split-media{order:2} } .split-media{position:relative} .split-media img{width:100%;border-radius:var(--r-lg);aspect-ratio:4/3;object-fit:cover} .split-media--tall img{aspect-ratio:3/4} .split-badge{ position:absolute;right:clamp(-.5rem,-1vw,-1.5rem);bottom:clamp(-.75rem,-1.5vw,-1.75rem); max-width:min(280px,72%); padding:1.5rem 1.75rem;background:var(--navy);color:#fff;border-radius:var(--r-lg); box-shadow:var(--shadow-lg); } .split-badge .stat-n{display:block;font-size:2.25rem;line-height:1;color:#fff;margin-bottom:.35rem} .split-badge p{font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);line-height:1.45;margin:0} .split-copy > *+*{margin-top:1.25rem} .split-copy .btn-row{margin-top:2rem} .check-list{display:grid;gap:.85rem;margin-top:1.75rem} /* Block, not flex: these items mix with trailing text, and flex would split each run into its own column. Icon is pulled out of the text flow. */ .check-list li{ position:relative;padding-left:1.6rem;list-style:none; font-size:.9688rem;line-height:1.55; } .check-list > li > svg{position:absolute;left:0;top:.45em;color:var(--green)} .check-list strong{color:var(--ink);font-weight:600} .section--navy .check-list strong{color:#fff} /* ---- 12. Process steps -------------------------------------------------- */ .steps{counter-reset:step;display:grid;gap:clamp(1.75rem,3vw,2.5rem)} @media (min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}} .step{position:relative;counter-increment:step;padding-top:2.5rem;border-top:1px solid var(--line)} .section--navy .step{border-top-color:var(--line-light)} .step::before{ content:counter(step,decimal-leading-zero); position:absolute;top:1.15rem;left:0; font-size:.75rem;font-weight:700;letter-spacing:.16em;color:var(--green); } .step h3{font-size:1.1875rem;margin-bottom:.6rem} .step p{font-size:.9375rem;margin:0} /* ---- 13. Pricing -------------------------------------------------------- */ .price-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} .price{ display:flex;flex-direction:column; padding:clamp(1.5rem,2.6vw,2rem); background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); transition:border-color .3s var(--ease),box-shadow .3s var(--ease); } .price:hover{border-color:rgba(24,108,155,.4);box-shadow:var(--shadow-sm)} .price--feature{background:var(--navy);border-color:var(--navy);color:rgba(255,255,255,.76)} .price--feature h3,.price--feature .price-n{color:#fff} .price-tag{ display:inline-block;align-self:flex-start;margin-bottom:1.1rem; padding:.3rem .7rem;border-radius:2px;background:var(--green);color:#0A2C40; font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; } .price h3{font-size:1.125rem;margin-bottom:.85rem} .price-n{ display:flex;align-items:baseline;gap:.35rem; font-size:2.125rem;font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1; margin-bottom:.4rem; } .price-n small{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--body)} .price--feature .price-n small{color:rgba(255,255,255,.6)} .price-sub{font-size:.875rem;line-height:1.5;margin-bottom:1.35rem;padding-bottom:1.35rem;border-bottom:1px solid var(--line)} .price--feature .price-sub{border-bottom-color:var(--line-light)} .price ul{display:grid;gap:.55rem;margin-bottom:1.75rem} .price li{display:flex;gap:.6rem;align-items:flex-start;list-style:none;font-size:.9063rem;line-height:1.5} .price li svg{flex:none;color:var(--green);margin-top:5px} .price .btn{margin-top:auto} .price-note{ display:flex;gap:.85rem;align-items:flex-start; margin-top:2rem;padding:1.25rem 1.5rem; background:var(--blue-tint);border-left:3px solid var(--blue);border-radius:0 var(--r) var(--r) 0; font-size:.9063rem;line-height:1.6; } .price-note svg{flex:none;color:var(--blue);margin-top:3px} /* ---- 14. Areas ---------------------------------------------------------- */ .area-list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem} .area-list li{list-style:none} .area-list span{ display:inline-block;padding:.55rem 1.1rem; border:1px solid var(--line-light);border-radius:100px; font-size:.8125rem;letter-spacing:.06em;color:rgba(255,255,255,.86); } /* ---- 15. Stats ---------------------------------------------------------- */ .stats{display:grid;gap:clamp(1.75rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))} .stat{border-left:2px solid var(--green);padding-left:1.25rem} .stat-n{display:block;font-size:clamp(1.875rem,1.4rem + 1.6vw,2.75rem);line-height:1;letter-spacing:-.02em;margin-bottom:.5rem} .stat p{font-size:.8125rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1.4;margin:0} /* ---- 16. FAQ ------------------------------------------------------------ */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem; padding:1.5rem 0;cursor:pointer;list-style:none; font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);font-weight:500;color:var(--ink);line-height:1.35; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";flex:none;width:14px;height:14px;margin-top:6px; background:currentColor;color:var(--blue); clip-path:polygon(45% 0,55% 0,55% 45%,100% 45%,100% 55%,55% 55%,55% 100%,45% 100%,45% 55%,0 55%,0 45%,45% 45%); transition:transform .3s var(--ease); } .faq details[open] summary::after{transform:rotate(135deg)} .faq summary:hover{color:var(--blue)} .faq-a{padding:0 0 1.75rem;max-width:74ch} .faq-a p+p{margin-top:.85rem} /* ---- 17. Forms ---------------------------------------------------------- */ .form-panel{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(1.5rem,3.4vw,2.75rem);box-shadow:var(--shadow-md); } .field-grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .field{display:flex;flex-direction:column;gap:.5rem} .field--full{grid-column:1/-1} .field label{font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)} .field label .req{color:var(--blue)} .field input,.field select,.field textarea{ width:100%;min-height:52px;padding:.85rem 1rem; font-family:inherit;font-size:1rem;color:var(--ink); background:var(--paper);border:1px solid var(--line);border-radius:var(--r); transition:border-color .2s var(--ease),box-shadow .2s var(--ease); appearance:none;-webkit-appearance:none; } .field textarea{min-height:130px;resize:vertical;line-height:1.6} .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234C6675' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;background-size:12px; padding-right:2.75rem;cursor:pointer; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(24,108,155,.14); } .field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{ border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.12); } .field .err{font-size:.8125rem;color:#C0392B;letter-spacing:0;text-transform:none;font-weight:400;display:none} .field .err.is-on{display:block} /* .checkbox is itself a