/* ============================================================ Canely · Kennel Page — public breeder website Warm neutral base + one natural accent (themeable). Boutique / heritage. Mobile-first, responsive. ============================================================ */ :root{ /* base neutral palette — default "Pietra" (greige). Swapped via Tweaks. */ --bg: #F4F3EF; --bg-2: #ECEAE3; --bg-3: #E0DDD4; --surface: #FFFFFF; --surface-2: #FAF9F5; --ink: #2B2B27; --ink-2: #585750; --ink-3: #918F84; --line: #E3E1D8; --line-2: #ECEAE2; /* image placeholders follow the base theme */ --ph-a:#ECEAE3; --ph-b:#E0DDD3; --ph-c:#D5D1C5; --ph-vig:rgba(90,84,64,.13); --ph-mark:rgba(110,104,86,.34); --ph-tagbg:rgba(50,48,38,.44); /* accent — default: terracotta. Swapped by theme via Tweaks. */ --accent: #BE6E4F; --accent-ink: #9A5236; --accent-soft: #F4E5DC; --accent-line: #E8D2C3; /* PRO */ --pro: #B0863C; --pro-soft: #F3E9D3; /* status */ --ok: #5E8C61; --ok-bg:#E7F0E5; --hold: #B0863C; --hold-bg:#F4EAD6; --done: #8B8275; --done-bg:#ECE5D8; --male: #5B7FA6; --male-bg:#E7EDF3; --female:#B06A82; --female-bg:#F4E6EC; --serif:"Fraunces", "Hoefler Text", Georgia, serif; --sans:"Hanken Grotesk", system-ui, -apple-system, sans-serif; --mono:"SFMono-Regular", ui-monospace, "Menlo", monospace; --maxw: 1180px; --pad: clamp(20px, 5vw, 64px); --r-lg: 22px; --r-md: 16px; --r-sm: 11px; --shadow: 0 14px 40px -22px rgba(54,46,30,.30); --shadow-sm: 0 6px 20px -12px rgba(54,46,30,.25); } /* base palette presets applied to */ html[data-base="pietra"]{ --bg:#F4F3EF; --bg-2:#ECEAE3; --bg-3:#E0DDD4; --surface:#FFFFFF; --surface-2:#FAF9F5; --ink:#2B2B27; --ink-2:#585750; --ink-3:#918F84; --line:#E3E1D8; --line-2:#ECEAE2; --ph-a:#ECEAE3; --ph-b:#E0DDD3; --ph-c:#D5D1C5; --ph-vig:rgba(90,84,64,.13); --ph-mark:rgba(110,104,86,.34); --ph-tagbg:rgba(50,48,38,.44); } html[data-base="nebbia"]{ --bg:#F5F6F7; --bg-2:#EBEDEF; --bg-3:#DEE1E4; --surface:#FFFFFF; --surface-2:#FAFBFC; --ink:#24272B; --ink-2:#525960; --ink-3:#899097; --line:#E1E4E7; --line-2:#EBEDEF; --ph-a:#EAEDF0; --ph-b:#DEE3E7; --ph-c:#D1D8DD; --ph-vig:rgba(58,72,86,.13); --ph-mark:rgba(96,108,120,.34); --ph-tagbg:rgba(32,40,48,.46); } html[data-base="salvia"]{ --bg:#F3F5EF; --bg-2:#E9ECE1; --bg-3:#DCE1D2; --surface:#FFFFFF; --surface-2:#F9FBF5; --ink:#272A23; --ink-2:#535A4C; --ink-3:#8B9182; --line:#E1E5D9; --line-2:#EAEEE2; --ph-a:#E8ECDF; --ph-b:#DCE2CF; --ph-c:#D0D7C1; --ph-vig:rgba(70,82,56,.13); --ph-mark:rgba(104,114,88,.34); --ph-tagbg:rgba(38,46,32,.44); } html[data-base="avorio"]{ --bg:#FAF6EE; --bg-2:#F4EDDF; --bg-3:#ECE3D2; --surface:#FFFFFF; --surface-2:#FBF7EF; --ink:#2C2A24; --ink-2:#5E574B; --ink-3:#978F7E; --line:#E7DECC; --line-2:#EFE8D9; --ph-a:#F1E6D4; --ph-b:#EAD8C2; --ph-c:#E3CDB6; --ph-vig:rgba(120,74,42,.16); --ph-mark:rgba(120,90,58,.32); --ph-tagbg:rgba(58,40,24,.44); } html[data-base="notte"]{ --bg:#1D1E1A; --bg-2:#24251F; --bg-3:#2C2E26; --surface:#26271F; --surface-2:#2B2D24; --ink:#F0EDE3; --ink-2:#BAB5A6; --ink-3:#8A8674; --line:#373930; --line-2:#31332A; --ph-a:#2E2F27; --ph-b:#34362C; --ph-c:#3A3C31; --ph-vig:rgba(0,0,0,.32); --ph-mark:rgba(230,222,200,.16); --ph-tagbg:rgba(10,10,8,.55); } /* theme presets applied to */ html[data-accent="sage"] { --accent:#6E8B6E; --accent-ink:#4E6B4F; --accent-soft:#E9EFE7; --accent-line:#D6E1D2; } html[data-accent="terracotta"]{ --accent:#BE6E4F; --accent-ink:#9A5236; --accent-soft:#F4E5DC; --accent-line:#E8D2C3; } html[data-accent="blue"] { --accent:#7E96AE; --accent-ink:#54697F; --accent-soft:#E7ECF1; --accent-line:#D4DDE6; } html[data-accent="ochre"] { --accent:#9A7B4F; --accent-ink:#765A31; --accent-soft:#F0E8D8; --accent-line:#E2D6BF; } *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} html{scroll-behavior:smooth;scroll-padding-top:84px;} body{ background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:17px;line-height:1.6;font-weight:400; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} svg.ico{display:inline-block;flex:none;vertical-align:-.14em;} ::selection{background:var(--accent-soft);} /* ---------- typographic helpers ---------- */ .serif{font-family:var(--serif);} .mono{font-family:var(--mono);} .eyebrow{ font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--accent-ink);display:inline-flex;align-items:center;gap:9px; } .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--accent);display:inline-block;} .eyebrow.center{justify-content:center;} .muted{color:var(--ink-2);} .faint{color:var(--ink-3);} h1,h2,h3,h4{font-family:var(--serif);font-weight:480;color:var(--ink);line-height:1.08;letter-spacing:-.012em;} h1{font-size:clamp(2.5rem,6.2vw,4.4rem);} h2{font-size:clamp(1.95rem,3.7vw,2.9rem);} h3{font-size:clamp(1.3rem,2vw,1.55rem);} .lead{font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.55;color:var(--ink-2);font-weight:380;} /* ---------- layout ---------- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);} section{padding-block:clamp(56px,8vw,108px);} .sec-head{display:flex;flex-direction:column;gap:16px;max-width:660px;} .sec-head.center{margin-inline:auto;text-align:center;align-items:center;} .divider{height:1px;background:var(--line);border:none;} /* ============================================================ Buttons ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--sans);font-weight:600;font-size:1rem;cursor:pointer; padding:14px 24px;border-radius:999px;border:1.5px solid transparent; transition:transform .18s ease, background .2s, box-shadow .2s, border-color .2s; white-space:nowrap;line-height:1; } .btn .ico{font-size:1.15em;} .btn-solid{background:var(--accent);color:#fff;box-shadow:0 10px 24px -12px var(--accent);} .btn-solid:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px var(--accent);} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);} .btn-ghost:hover{border-color:var(--ink-3);background:var(--surface-2);transform:translateY(-2px);} .btn-ink{background:var(--ink);color:var(--bg);} .btn-ink:hover{transform:translateY(-2px);} .btn-sm{padding:10px 16px;font-size:.9rem;} .link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--accent-ink); border-bottom:1.5px solid transparent;padding-bottom:2px;transition:gap .2s,border-color .2s;} .link-arrow:hover{gap:11px;border-color:var(--accent-line);} .link-arrow .ico{font-size:1.1em;} /* ============================================================ Badges / chips ============================================================ */ .badge{ display:inline-flex;align-items:center;gap:7px;white-space:nowrap; padding:7px 13px;border-radius:999px;font-size:.82rem;font-weight:600;line-height:1; background:var(--surface);border:1px solid var(--line);color:var(--ink-2); } .badge .ico{font-size:1.05em;} .badge-cert{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line);} .badge-cert .ico{color:var(--accent);} .badge-gold{color:var(--pro);background:var(--pro-soft);border-color:#E7D6AE;} .badge-soft{background:var(--bg-2);border-color:var(--line);} .badge-male{color:var(--male);background:var(--male-bg);border-color:#D5E0EC;} .badge-female{color:var(--female);background:var(--female-bg);border-color:#EBD5DE;} .badge-ok{color:var(--ok);background:var(--ok-bg);border-color:#D3E4D2;} .badge-hold{color:var(--hold);background:var(--hold-bg);border-color:#E8D9B8;} .badge-done{color:var(--done);background:var(--done-bg);border-color:#DED6C6;} .dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;} /* ============================================================ Image placeholders (uniform "filter" — coherent treatment) ============================================================ */ .ph{ position:relative;overflow:hidden;border-radius:var(--r-md); background: radial-gradient(120% 100% at 18% 8%, rgba(255,255,255,.5), transparent 50%), linear-gradient(150deg, var(--ph-a) 0%, var(--ph-b) 42%, var(--ph-c) 100%); color:var(--ph-mark);isolation:isolate; } .ph::before{ /* subtle diagonal weave */ content:"";position:absolute;inset:0;opacity:.5; background:repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 1px, transparent 1px 9px); mix-blend-mode:overlay; } .ph::after{ /* unifying vignette */ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(110% 80% at 50% 110%, var(--ph-vig), transparent 60%); } .ph > .ph-tag{ position:absolute;left:12px;bottom:11px;z-index:2; font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:#fff; background:var(--ph-tagbg);backdrop-filter:blur(3px); padding:4px 9px;border-radius:7px;display:inline-flex;align-items:center;gap:6px; } .ph > .ph-mark{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; z-index:1;color:var(--ph-mark); } .ph > .ph-mark .ico{font-size:clamp(40px,8vw,76px);} .ph.cover{height:100%;width:100%;} /* ============================================================ Header ============================================================ */ .site-head{ position:sticky;top:0;z-index:60; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px) saturate(1.1); border-bottom:1px solid transparent;transition:border-color .3s, background .3s; } .site-head.stuck{border-color:var(--line);background:color-mix(in srgb, var(--bg) 92%, transparent);} .site-head .bar{display:flex;align-items:center;gap:22px;height:72px;} .brand{display:flex;align-items:center;gap:12px;margin-right:auto;} .brand .mark{ width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-line); font-family:var(--serif);font-size:21px;font-weight:560; } .brand .mark.logo-img{background:var(--ink);color:var(--bg);} .brand .bn{font-family:var(--serif);font-size:1.16rem;font-weight:540;letter-spacing:-.01em;line-height:1.05;white-space:nowrap;} .brand .bs{font-size:.72rem;color:var(--ink-3);letter-spacing:.04em;margin-top:1px;white-space:nowrap;} .brand > span{display:flex;flex-direction:column;} .nav{display:flex;align-items:center;gap:4px;} .nav a{padding:9px 14px;border-radius:999px;font-size:.96rem;font-weight:500;color:var(--ink-2);transition:color .2s,background .2s;} .nav a:hover{color:var(--ink);background:var(--surface-2);} .head-cta{display:flex;align-items:center;gap:10px;} .hamburger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface); align-items:center;justify-content:center;cursor:pointer;color:var(--ink);font-size:22px;} .lockmini{font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--pro);text-transform:uppercase; display:inline-flex;align-items:center;gap:3px;} /* mobile menu sheet */ .m-menu{position:fixed;inset:0;z-index:70;display:none;} .m-menu.open{display:block;} .m-menu .scrim{position:absolute;inset:0;background:rgba(40,34,24,.34);} .m-menu .sheet{position:absolute;top:0;right:0;bottom:0;width:min(82vw,340px);background:var(--bg); padding:22px;display:flex;flex-direction:column;gap:6px;box-shadow:-20px 0 50px -20px rgba(0,0,0,.4); transform:translateX(100%);animation:slidein .32s cubic-bezier(.4,0,.2,1) forwards;} @keyframes slidein{to{transform:translateX(0);}} .m-menu .sheet .mtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .m-menu .sheet a{padding:14px 12px;border-radius:12px;font-size:1.1rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-2);} .m-menu .sheet a:last-of-type{border-bottom:none;} /* ============================================================ Hero ============================================================ */ .hero{position:relative;padding-block:clamp(28px,4vw,46px) clamp(48px,7vw,86px);} .hero-cover{ position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:clamp(440px,64vh,640px); display:flex;align-items:flex-end;box-shadow:var(--shadow); } .hero-cover .ph{position:absolute;inset:0;border-radius:0;} .hero-cover .scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(to top, rgba(34,24,13,.74) 0%, rgba(34,24,13,.40) 44%, rgba(34,24,13,.16) 100%);} .hero-card{position:relative;z-index:2;color:#fff;padding:clamp(26px,4vw,46px);max-width:680px;} .hero-card .eyebrow{color:#F6E3CF;text-shadow:0 1px 12px rgba(0,0,0,.4);} .hero-card .hero-loc{text-shadow:0 1px 12px rgba(0,0,0,.35);} .hero-card .eyebrow::before{background:#F0C9A8;} .hero-card h1{color:#fff;margin:16px 0 14px;text-shadow:0 2px 26px rgba(0,0,0,.22);} .hero-loc{display:inline-flex;align-items:center;gap:7px;font-size:1.02rem;color:#F4E9DC;font-weight:500;} .hero-certs{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 26px;} .hero-certs .badge{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff;backdrop-filter:blur(4px);} .hero-certs .badge .ico{color:#F0C9A8;} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;} .hero-actions .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);} .hero-actions .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;} /* small floating stat strip under hero */ .hero-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:18px;} .hero-strip .hs{background:var(--surface);padding:18px 20px;} .hero-strip .hs .n{font-family:var(--serif);font-size:1.7rem;color:var(--ink);line-height:1;} .hero-strip .hs .l{font-size:.84rem;color:var(--ink-3);margin-top:6px;} /* ============================================================ Editorial / richtext (prose) ============================================================ */ .prose{color:var(--ink-2);font-size:1.08rem;line-height:1.74;max-width:68ch;} .prose > * + *{margin-top:1.1em;} .prose h2{font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--ink);margin-top:1.7em;} .prose h3{font-size:1.3rem;color:var(--ink);margin-top:1.5em;} .prose p{text-wrap:pretty;} .prose strong{color:var(--ink);font-weight:600;} .prose a{color:var(--accent-ink);border-bottom:1.5px solid var(--accent-line);} .prose a:hover{border-color:var(--accent);} .prose ul,.prose ol{padding-left:1.3em;} .prose li{margin-top:.5em;padding-left:.3em;} .prose li::marker{color:var(--accent);} .prose blockquote{ border-left:2.5px solid var(--accent);padding:6px 0 6px 22px;margin-block:1.5em; font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--ink);font-style:italic;font-weight:420; } .prose figure{margin-block:1.6em;} .prose figure .ph{aspect-ratio:16/10;} .prose figcaption{font-size:.86rem;color:var(--ink-3);margin-top:9px;font-family:var(--mono);} .prose .pull{font-family:var(--serif);font-size:1.05rem;} /* two-column editorial */ .editorial{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;} .editorial .media .ph{aspect-ratio:4/5;border-radius:var(--r-lg);} .breeds{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px;} /* ============================================================ Cards — riproduttori ============================================================ */ .grid{display:grid;gap:clamp(18px,2.5vw,28px);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);} .dog-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column;transition:transform .22s ease, box-shadow .22s;cursor:pointer; } .dog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);} .dog-card .pic{position:relative;aspect-ratio:4/3;} .dog-card .pic .ph{position:absolute;inset:0;border-radius:0;} .dog-card .pic .sx{position:absolute;top:12px;left:12px;z-index:3;} .dog-card .pic .titlebadge{position:absolute;top:12px;right:12px;z-index:3;} .dog-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:4px;flex:1;} .dog-card .nm{font-family:var(--serif);font-size:1.42rem;color:var(--ink);line-height:1.05;} .dog-card .br{color:var(--ink-2);font-size:.96rem;} .dog-card .loi{font-family:var(--mono);font-size:.82rem;color:var(--ink-3);margin-top:2px;} .dog-card .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;} .dog-card .foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;} /* ============================================================ Cards — cucciolate ============================================================ */ .litter-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; display:grid;grid-template-columns:42% 1fr;transition:transform .22s ease, box-shadow .22s;cursor:pointer; } .litter-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);} .litter-card .pic{position:relative;min-height:230px;} .litter-card .pic .ph{position:absolute;inset:0;border-radius:0;} .litter-card .pic .st{position:absolute;top:12px;left:12px;z-index:3;} .litter-card .body{padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:9px;} .litter-card .nm{font-family:var(--serif);font-size:clamp(1.5rem,2.3vw,1.95rem);color:var(--ink);line-height:1.05;} .litter-card .meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--ink-2);font-size:.95rem;margin-top:2px;} .litter-card .meta span{display:inline-flex;align-items:center;gap:6px;} .litter-card .meta .ico{color:var(--accent);font-size:1.05em;} .litter-card .parents{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:.96rem;} .litter-card .collars{display:flex;gap:6px;margin-top:4px;} .collar{width:16px;height:16px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);} .litter-card .foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;} /* ============================================================ Blog / pagine libere ============================================================ */ .post-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column;transition:transform .22s ease, box-shadow .22s;cursor:pointer; } .post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);} .post-card .pic{position:relative;aspect-ratio:16/10;} .post-card .pic .ph{position:absolute;inset:0;border-radius:0;} .post-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1;} .post-card .kicker{font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--accent-ink);text-transform:uppercase;display:flex;align-items:center;gap:8px;} .post-card .kicker .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3);} .post-card .kicker .d{color:var(--ink-3);font-weight:500;letter-spacing:0;text-transform:none;} .post-card h3{font-size:1.32rem;} .post-card p{color:var(--ink-2);font-size:.98rem;line-height:1.5;} .post-card .foot{margin-top:auto;padding-top:6px;} /* ============================================================ Gallery (detail pages) ============================================================ */ .gallery{display:grid;gap:12px;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:1fr 1fr;} .gallery .g{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:150px;} .gallery .g .ph{position:absolute;inset:0;border-radius:0;} .gallery .g.lead{grid-row:1/3;min-height:340px;} .gallery .g .play{position:absolute;right:12px;bottom:12px;z-index:3;width:38px;height:38px;border-radius:50%; background:rgba(255,251,243,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;} /* ============================================================ Detail page scaffolding ============================================================ */ .crumb{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;color:var(--ink-2);font-weight:500;padding-block:8px;} .crumb:hover{color:var(--ink);} .crumb .ico{font-size:1.1em;} .detail-head{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(26px,4vw,56px);align-items:center;} .detail-head .info .nm{font-family:var(--serif);font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.04;margin:14px 0 6px;} .detail-head .info .sub{font-size:1.15rem;color:var(--ink-2);} .chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;} .spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 36px;} .spec{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-2);} .spec .k{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);font-size:.96rem;} .spec .k .ico{color:var(--accent);font-size:1.15em;} .spec .v{font-weight:600;color:var(--ink);text-align:right;} .spec .v.mono{font-family:var(--mono);font-weight:500;font-size:.95rem;} .titles-list{display:flex;flex-direction:column;gap:10px;} .title-row{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-md);padding:14px 16px;} .title-row .md{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center; background:var(--pro-soft);color:var(--pro);} .title-row .t{font-weight:600;color:var(--ink);} .title-row .y{color:var(--ink-3);font-size:.9rem;margin-left:auto;font-family:var(--mono);} .health-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;} .health{display:flex;align-items:flex-start;gap:13px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-md);padding:16px 18px;} .health .ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent-ink);} .health .hl{font-size:.86rem;color:var(--ink-3);} .health .hv{font-weight:600;color:var(--ink);margin-top:2px;display:flex;align-items:center;gap:7px;} .health .hv .ok{color:var(--ok);} /* mini pedigree (3 gen) */ .ped{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:center;} .ped .col{display:flex;flex-direction:column;gap:14px;} .ped .col.g2{gap:10px;} .ped-node{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 13px;position:relative;overflow:hidden;} .ped-node .tl{position:absolute;left:0;top:0;bottom:0;width:3px;} .ped-node.m .tl{background:var(--male);} .ped-node.f .tl{background:var(--female);} .ped-node .pn{font-weight:600;font-size:.96rem;color:var(--ink);line-height:1.15;padding-left:5px;} .ped-node .pl{font-family:var(--mono);font-size:.76rem;color:var(--ink-3);margin-top:3px;padding-left:5px;} .ped-node.sm{padding:9px 11px;} .ped-node.sm .pn{font-size:.84rem;} .ped-node.unknown{background:repeating-linear-gradient(135deg,#F4ECDD,#F4ECDD 7px,#EFE6D3 7px,#EFE6D3 14px); border:1px dashed var(--line);color:var(--ink-3);font-size:.82rem;display:flex;align-items:center;gap:8px;} .ped-label{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:center;margin-bottom:4px;} /* puppies list */ .pup-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;} .pup{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-md);padding:14px 16px;transition:transform .18s, box-shadow .18s;} .pup:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);} .pup .clr{width:30px;height:30px;border-radius:50%;flex:none;border:3px solid var(--surface);box-shadow:0 0 0 1.5px var(--line);} .pup .pi{flex:1;min-width:0;} .pup .pname{font-weight:600;color:var(--ink);font-size:1.02rem;} .pup .psub{font-size:.86rem;color:var(--ink-3);display:flex;align-items:center;gap:6px;} /* ============================================================ Contact ============================================================ */ .contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,56px);} .form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);} .field{margin-bottom:16px;} .field label{display:block;font-size:.86rem;font-weight:600;color:var(--ink-2);margin-bottom:7px;} .field input,.field select,.field textarea{ width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink); background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 15px; transition:border-color .2s, background .2s; } .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);} .field textarea{min-height:120px;resize:vertical;} .field-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .interest{display:flex;gap:8px;} .interest label{flex:1;cursor:pointer;margin:0;} .interest input{display:none;} .interest .opt{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:var(--r-sm); border:1.5px solid var(--line);background:var(--surface-2);font-weight:500;font-size:.95rem;color:var(--ink-2);transition:all .18s;} .interest input:checked + .opt{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:600;} .form-note{font-size:.82rem;color:var(--ink-3);margin-top:6px;display:flex;align-items:flex-start;gap:7px;} .contact-info{display:flex;flex-direction:column;gap:14px;} .cinfo{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;} .cinfo .ic{width:42px;height:42px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-ink);} .cinfo .cl{font-size:.82rem;color:var(--ink-3);} .cinfo .cv{font-weight:600;color:var(--ink);} .map{height:220px;border-radius:var(--r-md);position:relative;overflow:hidden;border:1px solid var(--line); background: linear-gradient(0deg, rgba(190,110,79,0) 60%, var(--accent-soft) 100%), repeating-linear-gradient(0deg, #EDE4D2 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, #EDE4D2 0 1px, transparent 1px 34px), #F4EDDF; } .map .pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);color:var(--accent);font-size:34px;filter:drop-shadow(0 6px 8px rgba(120,74,42,.3));} .map .road{position:absolute;background:#E4D9C3;} /* ============================================================ PRO lock / upsell ============================================================ */ .lockable{position:relative;} .lock-overlay{ position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px; text-align:center;padding:24px;border-radius:inherit; background:color-mix(in srgb, var(--bg-2) 78%, transparent);backdrop-filter:blur(4px); border:1px dashed var(--accent-line); } html[data-plan="free"] .lockable.on .lock-overlay{display:flex;} html[data-plan="free"] .lockable.on > :not(.lock-overlay){filter:saturate(.4) blur(1.5px);opacity:.5;} .lock-overlay .lk{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pro-soft);color:var(--pro);} .lock-overlay .lt{font-family:var(--serif);font-size:1.15rem;color:var(--ink);} .lock-overlay .ls{font-size:.88rem;color:var(--ink-2);max-width:240px;} .pro-pill{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--pro);background:var(--pro-soft);border:1px solid #E7D6AE;padding:3px 8px;border-radius:999px;} /* hide pure-PRO bonus blocks in free */ html[data-plan="free"] [data-proonly]{display:none !important;} html[data-plan="pro"] [data-freeonly]{display:none !important;} /* ============================================================ Footer ============================================================ */ .site-foot{background:#211F1A;color:#D8D2C4;padding-block:clamp(48px,6vw,76px) 30px;margin-top:40px;} .site-foot a{color:#D8D2C4;} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;} .foot-brand .mark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.16);} .foot-brand .bn{color:#fff;} .foot-brand p{color:#A9A294;font-size:.95rem;margin-top:14px;max-width:34ch;line-height:1.55;} .foot-col h4{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8C8576;margin-bottom:16px;} .foot-col a{display:block;padding:7px 0;color:#C8C2B5;font-size:.96rem;transition:color .2s;} .foot-col a:hover{color:#fff;} .socials{display:flex;gap:10px;margin-top:6px;} .socials a{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.07);color:#D8D2C4;border:1px solid rgba(255,255,255,.12);font-size:19px;transition:all .2s;} .socials a:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-2px);} .foot-bot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between; margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);color:#8C8576;font-size:.86rem;} .foot-bot .links{display:flex;gap:20px;flex-wrap:wrap;} .powered{display:inline-flex;align-items:center;gap:7px;color:#8C8576;} .powered .cmark{color:var(--accent);} .powered b{color:#C8C2B5;font-weight:600;} /* ============================================================ Floating controls (Tweaks + device preview) — mockup chrome ============================================================ */ .fab{position:fixed;right:20px;bottom:20px;z-index:90;width:54px;height:54px;border-radius:50%; background:var(--ink);color:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center; font-size:24px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);transition:transform .2s;} .fab:hover{transform:scale(1.06) rotate(8deg);} .tweaks{position:fixed;right:20px;bottom:86px;z-index:90;width:300px;max-width:calc(100vw - 40px); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 24px 60px -20px rgba(40,30,15,.5); padding:18px;display:none;flex-direction:column;gap:18px;} .tweaks.open{display:flex;animation:pop .2s ease;} @keyframes pop{from{opacity:0;transform:translateY(8px);}} .tweaks .th{display:flex;align-items:center;justify-content:space-between;} .tweaks .th .tt{font-family:var(--serif);font-size:1.2rem;} .tweaks .th .x{cursor:pointer;color:var(--ink-3);font-size:20px;line-height:1;background:none;border:none;} .tweaks .grp .gl{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;} .swatches{display:flex;gap:10px;} .swatch{width:38px;height:38px;border-radius:50%;cursor:pointer;border:2px solid transparent; display:flex;align-items:center;justify-content:center;transition:transform .15s;} .swatch:hover{transform:scale(1.08);} .swatch.on{border-color:var(--ink);} .swatch .ico{color:#fff;font-size:18px;opacity:0;} .swatch.on .ico{opacity:1;} .swatch.base-sw{border:2px solid var(--line);} .swatch.base-sw .ico{display:none;} .swatch.base-sw.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink);} .seg{display:flex;background:var(--bg-2);border-radius:999px;padding:4px;} .seg button{flex:1;border:none;background:none;font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--ink-2); padding:9px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;} .seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);} .seg button .ico{font-size:1.05em;} .tweaks .hint{font-size:.78rem;color:var(--ink-3);line-height:1.4;} /* device preview overlay */ .device-stage{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center; background:#2A2620;padding:24px;} .device-stage.open{display:flex;} .device-stage .closebar{position:absolute;top:18px;right:20px;display:flex;gap:10px;align-items:center;} .device-stage .closebar .lbl{color:#B9B2A3;font-size:.9rem;} .device-stage .closebar button{width:42px;height:42px;border-radius:50%;border:1px solid #4a463d;background:#39342c;color:#E8E2D4;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;} .phone-bezel{width:390px;max-width:calc(100vw - 32px);height:min(844px,calc(100vh - 80px)); background:linear-gradient(150deg,#1a1712,#0c0a08);border-radius:48px;padding:11px;box-shadow:0 40px 80px -20px rgba(0,0,0,.7),inset 0 0 0 2px #36302a;} .phone-bezel .scr{width:100%;height:100%;border-radius:38px;overflow:hidden;background:var(--bg);position:relative;} .phone-bezel iframe{width:100%;height:100%;border:none;display:block;} /* ============================================================ Reveal-on-scroll ============================================================ */ @media (prefers-reduced-motion: no-preference){ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);} .reveal.in{opacity:1;transform:none;} } /* ============================================================ Responsive ============================================================ */ @media (max-width:1000px){ .grid-3{grid-template-columns:repeat(2,1fr);} .editorial,.detail-head,.contact{grid-template-columns:1fr;} .editorial .media{order:-1;} .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto;} .gallery .g.lead{grid-row:auto;grid-column:1/3;min-height:300px;} .foot-top{grid-template-columns:1fr 1fr;} .foot-brand{grid-column:1/3;} } @media (max-width:980px){ .nav,.head-cta .btn{display:none;} .hamburger{display:flex;} } @media (max-width:720px){ body{font-size:16px;} .nav,.head-cta .btn{display:none;} .hamburger{display:flex;} .grid-3,.grid-2,.spec-grid,.health-grid,.pup-list{grid-template-columns:1fr;} .litter-card{grid-template-columns:1fr;} .litter-card .pic{min-height:200px;} .field-2{grid-template-columns:1fr;} .hero-strip{grid-template-columns:1fr;} .hero-strip .hs{display:flex;align-items:baseline;gap:12px;} .hero-strip .hs .l{margin-top:0;} .foot-top{grid-template-columns:1fr;} .foot-brand{grid-column:auto;} .interest{flex-direction:column;} .ped{grid-template-columns:1fr;} .ped .col{gap:10px;} } /* inside device-preview iframe: hide the mockup chrome */ html[data-framed] .fab,html[data-framed] .tweaks,html[data-framed] .device-stage{display:none !important;}