/* Theme Name: Bobby & Friends Theme URI: https://bobbyandfriends.ch Author: Bobby & Friends Author URI: https://bobbyandfriends.ch Description: Custom theme for Bobby & Friends — salon de toilettage et garderie pour chiens et chats à Montreux. Native Gutenberg, sticky header with video scrubbing, bilingual FR/EN. Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.5 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: bobby-friends */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap'); /* ===== Design tokens ===== */ :root{ --color-rose:#EA5183; --color-rose-dark:#D03A6E; --color-navy:#0C5285; --color-navy-deep:#0A3D6B; --color-white:#FFFFFF; --color-off-white:#F8F6F3; --color-text:#1A1A2E; --color-muted:#6B7280; --color-line:#E8E4DE; --space-xs:.375rem; --space-sm:.75rem; --space-md:1.25rem; --space-lg:2rem; --space-xl:3.5rem; --space-2xl:6rem; --radius-sm:6px; --radius-md:12px; --radius-pill:99px; --header-h:96px; --header-h-mobile:64px; } /* Typography systems — switch via */ html[data-font="A"]{ --font-display:'Fraunces', Georgia, serif; --font-body:'Inter', system-ui, sans-serif; } html[data-font="B"], html:not([data-font]){ --font-display:'DM Serif Display', Georgia, serif; --font-body:'DM Sans', system-ui, sans-serif; } html[data-font="C"]{ --font-display:'Cormorant Garamond', Georgia, serif; --font-body:'Manrope', system-ui, sans-serif; } /* ===== Reset & base ===== */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--font-body); color:var(--color-text); background:var(--color-off-white); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0 0 var(--space-md); color:var(--color-text)} h1{font-size:clamp(2.6rem,5.8vw,4.6rem); letter-spacing:-.01em} h2{font-size:clamp(1.9rem,3.5vw,2.8rem); letter-spacing:-.01em} h3{font-size:1.35rem} p{margin:0 0 var(--space-md)} a{color:inherit; text-decoration:none} img{max-width:100%; display:block; height:auto} .eyebrow{font-family:var(--font-body); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--color-muted); font-weight:600} /* ===== Layout primitives ===== */ .container{max-width:1240px; margin:0 auto; padding:0 var(--space-lg)} .section{padding:var(--space-2xl) 0} .section--alt{background:var(--color-white)} .bf-section-head{text-align:center; max-width:680px; margin:0 auto var(--space-xl)} .bf-section-head .eyebrow{display:block; margin-bottom:var(--space-sm)} .bf-section-head p{color:var(--color-muted); font-size:1.05rem} /* ===== Buttons ===== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-body); font-weight:600; font-size:.92rem; padding:.95rem 1.7rem; border-radius:var(--radius-pill); border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; letter-spacing:.01em; min-height:44px; text-decoration:none; } .btn:hover{transform:translateY(-1px)} .btn--rose{background:var(--color-rose); color:#fff} .btn--rose:hover{background:var(--color-rose-dark); color:#fff} .btn--outline-white{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)} .btn--outline-white:hover{background:#fff; color:var(--color-navy); border-color:#fff} .btn--ghost-navy{background:transparent; color:var(--color-navy); border-color:var(--color-navy)} .btn--ghost-navy:hover{background:var(--color-navy); color:#fff} /* ===== Gutenberg content tweaks for embedded blocks ===== */ .entry-content > *{max-width:760px; margin-left:auto; margin-right:auto} .entry-content .wp-block-image, .entry-content .wp-block-gallery, .entry-content .wp-block-columns{max-width:1080px} .entry-content blockquote{border-left:3px solid var(--color-rose); padding-left:var(--space-md); color:var(--color-text); font-style:italic} /* ===== Accessibility ===== */ .screen-reader-text{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0} :focus-visible{outline:2px solid var(--color-rose); outline-offset:2px; border-radius:var(--radius-sm)} /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} } /* ===== Responsive base ===== */ @media (max-width:768px){ .container{padding:0 var(--space-md)} .section{padding:var(--space-xl) 0} }