/* ============================================================ AJ Blinds & Curtains - shared stylesheet Used by: index.html, about.html, contact.html, and any new page. Brand palette (source of truth): PRIMARY DARK #262F38 PRIMARY BLUE #007EB3 DARK BLUE #006FA3 BACKGROUND #F3F5F8 LIGHT GRAY #C9CED4 Conventions in this file: - Mobile-first. Every @media is min-width; breakpoints are 600 / 768 / 960. - .glass is the surface primitive. Compose it:
. - Small text on light uses --accent-ink, never the raw brand blue (see notes at the token block). - index2.html is NOT on this stylesheet. It is the light/classic alternate and keeps its own inline CSS. To start a new page: copy the , header and footer from about.html, link this file, and write only the page-specific markup. ============================================================ */ /* ============================================================ TOKENS Brand palette (source of truth): PRIMARY DARK #262F38 PRIMARY BLUE #007EB3 DARK BLUE #006FA3 BACKGROUND #F3F5F8 LIGHT GRAY #C9CED4 This is the glassmorphic treatment of the same brand. The page runs dark: frosted panels need a rich backdrop to read as glass, and dark glass keeps text contrast far clear of AA (10:1 body, 7:1 muted). Light glass over a pale page is where this style usually fails. ============================================================ */ :root{ --brand:#007EB3; --brand-deep:#006FA3; --brand-lift:#4FB3DC; /* PRIMARY BLUE lifted for dark backdrops (4.7:1) */ --dark:#262F38; --deeper:#1B222A; --paper:#F3F5F8; --gray:#C9CED4; /* glass system */ --glass:rgba(255,255,255,.07); --glass-strong:rgba(255,255,255,.11); --glass-edge:rgba(255,255,255,.16); --glass-edge-hi:rgba(255,255,255,.28); --blur:16px; --ink:#F3F5F8; --ink-muted:#C9D2DB; --ink-dim:#9AA6B2; --display:"Calistoga",Georgia,serif; --body:"Inter",system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4rem; --r:14px; --r-lg:20px; --gut:clamp(1.25rem,4vw,2.5rem); --maxw:1200px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--deeper);color:var(--ink); font-family:var(--body);font-size:1rem;line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; padding-bottom:76px; /* sticky call bar; reset at >=768 */ } /* ---- ambient backdrop: the light source the glass refracts ---- */ .bg-field{position:fixed;inset:0;z-index:-1;overflow:hidden;background: linear-gradient(165deg,#1B222A 0%,#232D37 45%,#1A2129 100%)} .bg-field span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5} .bg-field span:nth-child(1){width:46vw;height:46vw;top:-8%;left:-6%;background:#007EB3} .bg-field span:nth-child(2){width:38vw;height:38vw;top:38%;right:-10%;background:#0E5C87} .bg-field span:nth-child(3){width:34vw;height:34vw;bottom:-10%;left:22%;background:#145E80} img{max-width:100%;display:block} a{color:inherit} button,input,textarea,select{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--brand-lift);outline-offset:3px;border-radius:4px} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .section{padding-block:clamp(3.5rem,8vw,6rem)} h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.14;letter-spacing:-.01em} h1{font-size:clamp(2.3rem,5.6vw,4rem);line-height:1.05} h2{font-size:clamp(1.8rem,3.6vw,2.7rem)} h3{font-size:1.12rem;line-height:1.3} .eyebrow{ font-family:var(--mono);font-size:.72rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--brand-lift); display:flex;align-items:center;gap:.6rem;margin-bottom:var(--s-2); } .eyebrow::before{content:"";width:1.75rem;height:1px;background:var(--brand-lift);flex:none} .lede{font-size:clamp(1rem,1.5vw,1.14rem);color:var(--ink-muted);max-width:56ch} .head-block{max-width:60ch;margin-bottom:var(--s-5)} /* ============================================================ GLASS PRIMITIVE ============================================================ */ .glass{ background:var(--glass); -webkit-backdrop-filter:blur(var(--blur)) saturate(140%); backdrop-filter:blur(var(--blur)) saturate(140%); border:1px solid var(--glass-edge); border-radius:var(--r-lg); position:relative;overflow:hidden; } /* specular highlight along the top edge — reads as a light source */ .glass::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); pointer-events:none; } /* no backdrop-filter (older Firefox): fall back to an opaque panel so text never lands on a raw gradient */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:rgba(38,47,56,.92)} } /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; min-height:48px;padding:.8rem 1.5rem; font-size:.95rem;font-weight:600;text-decoration:none; border:1px solid transparent;border-radius:999px;cursor:pointer; transition:background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease; } .btn svg{width:18px;height:18px;flex:none} .btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 24px -10px rgba(0,126,179,.9)} .btn-primary:hover{background:var(--brand-deep);transform:translateY(-1px)} .btn-glass{ background:var(--glass-strong);color:var(--ink);border-color:var(--glass-edge-hi); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } .btn-glass:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)} .btn-block{width:100%} @media (prefers-reduced-motion:reduce){.btn:hover{transform:none}} /* ============================================================ HEADER ============================================================ */ .site-head{position:sticky;top:0;z-index:50; background:rgba(27,34,42,.72); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid var(--glass-edge); } .site-head .wrap{display:flex;align-items:center;gap:var(--s-3);min-height:72px} .logo{display:flex;align-items:center;gap:.6rem;margin-right:auto;text-decoration:none} /* Icon + live text, not the raster lockup. The lockup is 877x268 with two stacked lines, so at header height its sub-line renders ~4px. Real text scales and stays crisp; the mark carries the brand. */ /* Phones show the name as plain text; the stacked lockup needs vertical room, so it only appears from 600px up. */ .logo-full{display:none} .logo-txt{ font-family:var(--body);font-weight:700;line-height:1.1;text-transform:uppercase; font-size:clamp(1rem,4.2vw,1.2rem);letter-spacing:-.005em;color:var(--ink); } @media (min-width:600px){ .logo-txt{display:none} .logo-full{display:block;height:64px;width:auto} .site-head .wrap{min-height:88px} } .nav{ position:fixed;inset:72px 0 auto; display:flex;flex-direction:column;align-items:stretch;gap:0; background:rgba(27,34,42,.94); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); border-bottom:1px solid var(--glass-edge); padding:var(--s-2) var(--gut) var(--s-3); transform:translateY(-120%);visibility:hidden; transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s; } .nav[data-open="true"]{ transform:translateY(0);visibility:visible; transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s; } .nav a{ text-decoration:none;font-size:1rem;font-weight:500;color:var(--ink-muted); padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.1); transition:color .2s ease; } .nav a:hover{color:var(--ink)} .head-cta{display:flex;align-items:center;gap:.6rem} .head-cta .btn-glass{display:none} /* the sticky call bar already carries Call + Free quote on phones, and the header cannot fit logo + CTA + burger at 375px */ .head-cta .btn-primary{display:none} @media (min-width:600px){.head-cta .btn-primary{display:inline-flex}} .burger{ display:flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:12px;cursor:pointer; background:var(--glass-strong);border:1px solid var(--glass-edge);color:var(--ink); } .burger svg{width:22px;height:22px} @media (prefers-reduced-motion:reduce){.nav{transition:none}} @media (min-width:960px){ .nav{ position:static;inset:auto;flex-direction:row;align-items:center;gap:var(--s-3); background:none;backdrop-filter:none;-webkit-backdrop-filter:none; border-bottom:0;padding:0;transform:none; } .nav a{font-size:.92rem;padding:.4rem 0;border-bottom:0} .burger{display:none} .head-cta .btn-glass{display:inline-flex} } /* ============================================================ HERO ============================================================ */ .hero .wrap{ display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem); align-items:center;padding-block:clamp(2.5rem,7vw,5rem); } .hero h1 span{color:var(--brand-lift);display:block} .hero .lede{margin-top:var(--s-3)} .hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-4)} .hero-assure{ display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:var(--s-3); font-size:.86rem;color:var(--ink-muted); } .hero-assure span{display:inline-flex;align-items:center;gap:.4rem} .hero-assure svg{width:16px;height:16px;color:var(--brand-lift);flex:none} .hero-figure{position:relative;order:-1} .hero-figure .glass{padding:10px;border-radius:var(--r-lg)} .hero-figure img{width:100%;height:auto;border-radius:calc(var(--r-lg) - 6px);aspect-ratio:4/3;object-fit:cover} .hero-badge{ position:absolute;left:1rem;right:1rem;bottom:1rem; display:flex;align-items:center;gap:.75rem; padding:.8rem 1rem;border-radius:var(--r); background:rgba(27,34,42,.6); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid var(--glass-edge-hi); } .hero-badge strong{font-family:var(--display);font-size:1.35rem;font-weight:400;line-height:1} .hero-badge p{font-size:.78rem;color:var(--ink-muted);line-height:1.35} .hero-badge .stars{display:flex;gap:1px;color:var(--brand-lift)} .hero-badge .stars svg{width:14px;height:14px} @media (min-width:960px){ .hero .wrap{grid-template-columns:1.02fr .98fr} .hero-figure{order:0} } /* ============================================================ TRUST STRIP ============================================================ */ .trust .wrap{padding-block:var(--s-2)} .trust .glass{ display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3) var(--s-2); padding:var(--s-4) var(--s-3); } .trust-item{display:flex;flex-direction:column;gap:.25rem} .trust-item b{font-family:var(--display);font-size:1.65rem;font-weight:400;color:var(--brand-lift);line-height:1} .trust-item span{font-size:.85rem;color:var(--ink-muted)} @media (min-width:768px){.trust .glass{grid-template-columns:repeat(4,1fr);gap:var(--s-3);padding:var(--s-4)}} /* ============================================================ CARDS ============================================================ */ .grid-3{display:grid;grid-template-columns:1fr;gap:var(--s-3)} @media (min-width:600px){.grid-3{grid-template-columns:repeat(2,1fr)}} @media (min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}} .card{ display:flex;flex-direction:column; transition:transform .28s ease,border-color .28s ease,background-color .28s ease; } .card:hover{transform:translateY(-5px);border-color:var(--glass-edge-hi);background:var(--glass-strong)} @media (prefers-reduced-motion:reduce){.card:hover{transform:none}} .card figure{margin:0;overflow:hidden;aspect-ratio:4/3} .card figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .card:hover figure img{transform:scale(1.05)} @media (prefers-reduced-motion:reduce){.card figure img,.card:hover figure img{transition:none;transform:none}} .card-body{padding:var(--s-3);display:flex;flex-direction:column;gap:.55rem;flex:1} .card-icon{ width:42px;height:42px;border-radius:12px;flex:none; background:rgba(0,126,179,.22);border:1px solid rgba(79,179,220,.35); display:grid;place-items:center;color:var(--brand-lift); margin-top:calc(var(--s-3) * -1 - 21px);margin-bottom:.4rem; position:relative;z-index:2; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } .card-icon svg{width:20px;height:20px} .card p{font-size:.93rem;color:var(--ink-muted)} .card .spec{ margin-top:auto;padding-top:.7rem;font-family:var(--mono);font-size:.7rem; letter-spacing:.06em;color:var(--ink-dim);border-top:1px solid rgba(255,255,255,.1); } /* ============================================================ PROCESS ============================================================ */ .steps{display:grid;grid-template-columns:1fr;gap:var(--s-3);counter-reset:step} @media (min-width:600px){.steps{grid-template-columns:repeat(2,1fr)}} @media (min-width:960px){.steps{grid-template-columns:repeat(4,1fr)}} .step{padding:var(--s-3)} .step::before{ counter-increment:step;content:"0" counter(step); font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.1em; color:var(--brand-lift);display:block;margin-bottom:.6rem; } .step h3{margin-bottom:.4rem} .step p{font-size:.92rem;color:var(--ink-muted)} /* ============================================================ GALLERY ============================================================ */ .gallery{display:grid;grid-template-columns:1fr;grid-auto-rows:210px;gap:var(--s-2)} .gallery figure{margin:0;position:relative;padding:0} .gallery figure img{width:100%;height:100%;object-fit:cover} .gallery figcaption{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:1.6rem .9rem .75rem; background:linear-gradient(transparent,rgba(27,34,42,.9)); font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase; color:var(--ink); opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease; } @media (min-width:600px){ .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px} .gallery .wide{grid-column:span 2} } @media (min-width:960px){ /* Three columns, not four. The six items total nine cells (two doubles, one double-height, three singles), which tiles 3x3 exactly. At four columns the grid left three holes and reordered the last two items. */ .gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:260px} .gallery .wide{grid-column:span 2} .gallery .tall{grid-row:span 2} .gallery figcaption{opacity:0;transform:translateY(6px)} .gallery figure:hover figcaption,.gallery figure:focus-within figcaption{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){.gallery figcaption{transition:none;opacity:1;transform:none}} /* ============================================================ REVIEWS ============================================================ */ .quote{padding:var(--s-3);display:flex;flex-direction:column;gap:.7rem} .quote .stars{display:flex;gap:2px;color:var(--brand-lift)} .quote .stars svg{width:16px;height:16px} .quote blockquote{font-size:.98rem;color:var(--ink-muted)} .quote figcaption{font-size:.82rem;color:var(--ink-dim);margin-top:auto;padding-top:.5rem} .placeholder-flag{ display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em; text-transform:uppercase;color:#FFD9A0;background:rgba(180,120,20,.28); border:1px solid rgba(255,190,110,.4);border-radius:999px;padding:.2rem .55rem; align-self:flex-start; } /* ============================================================ FAQ ============================================================ */ .faq-list{display:flex;flex-direction:column;gap:.75rem;max-width:72ch} .faq details{padding:0 var(--s-3)} .faq summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:.9rem; padding-block:1.05rem;font-weight:500;transition:color .2s ease; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--brand-lift)} .faq summary svg{width:20px;height:20px;flex:none;color:var(--brand-lift);margin-left:auto;transition:transform .25s ease} .faq details[open] summary svg{transform:rotate(45deg)} .faq details p{padding-bottom:1.1rem;color:var(--ink-muted);font-size:.95rem} @media (prefers-reduced-motion:reduce){.faq summary svg{transition:none}} /* ============================================================ QUOTE FORM ============================================================ */ .quote-card{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden} .quote-side{padding:clamp(1.6rem,4vw,2.5rem);background:rgba(0,126,179,.16);border-bottom:1px solid var(--glass-edge)} .quote-side .eyebrow{color:var(--brand-lift)} .quote-form{padding:clamp(1.6rem,4vw,2.5rem);display:flex;flex-direction:column;gap:var(--s-2)} .field{display:flex;flex-direction:column;gap:.35rem} .field label{font-size:.85rem;font-weight:500;color:var(--ink-muted)} .field input,.field select,.field textarea{ background:rgba(255,255,255,.06);border:1px solid var(--glass-edge); border-radius:10px;padding:.75rem .9rem;min-height:48px;color:var(--ink); transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease; } .field input::placeholder,.field textarea::placeholder{color:#8792A0} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--brand-lift);background:rgba(255,255,255,.1); box-shadow:0 0 0 3px rgba(79,179,220,.22); } .field select option{background:#242D36;color:var(--ink)} .field .err{font-size:.82rem;color:#FF9C9C;display:none} .field[data-invalid] input,.field[data-invalid] select{border-color:#FF9C9C} .field[data-invalid] .err{display:flex;align-items:center;gap:.35rem} .form-note{font-size:.8rem;color:var(--ink-dim)} .form-status{font-size:.9rem;min-height:1.4em} .form-status[data-state="ok"]{color:#8FE3A8;font-weight:500} .form-status[data-state="bad"]{color:#FF9C9C} @media (min-width:960px){ .quote-card{grid-template-columns:.85fr 1.15fr} .quote-side{border-bottom:0;border-right:1px solid var(--glass-edge)} } /* ============================================================ FOOTER ============================================================ */ .site-foot{border-top:1px solid var(--glass-edge);background:rgba(20,26,33,.55); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);margin-top:var(--s-5)} .foot-grid{display:grid;grid-template-columns:1fr;gap:var(--s-3);padding-block:var(--s-5) var(--s-4)} .foot-grid img{height:32px;width:auto;margin-bottom:var(--s-2)} .foot-grid p{font-size:.88rem;color:var(--ink-muted);max-width:44ch} .site-foot h3{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-dim);margin-bottom:.9rem} .site-foot ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;font-size:.9rem} .site-foot a{text-decoration:none;color:var(--ink-muted);transition:color .2s ease} .site-foot a:hover{color:var(--brand-lift)} .areas{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem} .areas span{font-size:.76rem;padding:.25rem .6rem;border:1px solid rgba(255,255,255,.14); border-radius:999px;color:var(--ink-dim)} .foot-bar{border-top:1px solid rgba(255,255,255,.1);padding-block:var(--s-2); display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between; font-size:.78rem;color:var(--ink-dim)} @media (min-width:768px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-4)}} /* ---- sticky call bar ---- */ .callbar{ position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:.5rem; padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom)); background:rgba(27,34,42,.86); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border-top:1px solid var(--glass-edge); } .callbar .btn{flex:1} @media (min-width:768px){.callbar{display:none}body{padding-bottom:0}} /* ---- reveal ---- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ---- inner-page additions ---- */ .page-head{padding-block:clamp(2.5rem,7vw,4.5rem) clamp(1.5rem,4vw,2.5rem)} .page-head h1{max-width:20ch} .crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-dim);margin-bottom:var(--s-2)} .crumb a{text-decoration:none;color:var(--brand-lift)} .prose{max-width:68ch;display:flex;flex-direction:column;gap:var(--s-3)} .prose p{color:var(--ink-muted)} .prose h2{margin-top:var(--s-3)} .split{display:grid;grid-template-columns:1fr;gap:var(--s-4);align-items:start} @media (min-width:960px){.split{grid-template-columns:1.15fr .85fr;gap:var(--s-5)}} .panel{padding:clamp(1.5rem,4vw,2.2rem)} .value{padding:var(--s-3);display:flex;flex-direction:column;gap:.5rem} .value .ico{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center; background:rgba(0,126,179,.22);border:1px solid rgba(79,179,220,.35);color:var(--brand-lift)} .value .ico svg{width:20px;height:20px} .value p{font-size:.93rem;color:var(--ink-muted)} .contact-list{list-style:none;display:flex;flex-direction:column;gap:var(--s-2)} .contact-list li{display:flex;gap:.85rem;align-items:flex-start} .contact-list svg{width:20px;height:20px;color:var(--brand-lift);flex:none;margin-top:3px} .contact-list a{text-decoration:none} .contact-list a:hover{color:var(--brand-lift)} .contact-list b{display:block;font-weight:600;font-size:.95rem} .contact-list span{font-size:.9rem;color:var(--ink-muted)} .needs-fact{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em; text-transform:uppercase;color:#FFD9A0;background:rgba(180,120,20,.28); border:1px solid rgba(255,190,110,.4);border-radius:999px;padding:.2rem .55rem} .field textarea{min-height:120px;resize:vertical;font-family:var(--body)} .checkline{display:flex;flex-wrap:wrap;gap:.5rem} .checkline label{ display:inline-flex;align-items:center;gap:.45rem;cursor:pointer; padding:.5rem .8rem;border-radius:999px;font-size:.86rem; background:rgba(255,255,255,.06);border:1px solid var(--glass-edge); transition:background-color .2s ease,border-color .2s ease; } .checkline label:hover{background:rgba(255,255,255,.12)} .checkline input{accent-color:var(--brand);width:16px;height:16px} .checkline input:checked + span{color:var(--brand-lift);font-weight:500} /* Honeypot: off-screen rather than display:none, because some bots skip fields that are explicitly hidden. Never focusable. */ .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}