/* Theme Name: Cozyde Theme URI: https://cozyde.com Description: Pinterest-first home decor theme for cozyde.com. Child of Hello Elementor. Built from the cozyde design system: oat + cocoa palette, Fraunces display, Karla body, pin-shaped cards. Author: cozyde Author URI: https://cozyde.com Template: hello-elementor Version: 1.0.0 Requires PHP: 7.4 Text Domain: cozyde */ /* ============================================================ cozyde.com — shared stylesheet ============================================================ */ :root{ --oat: #EDE5D9; --linen: #F8F4EE; --cocoa: #2C2420; --cocoa-60: #6B5C52; --moss: #5C6B4E; --honey: #C08A3E; --rose: #C9A093; --line: #D9CDBE; --display: "Fraunces", Georgia, serif; --body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --wrap: 1180px; --narrow: 720px; --r-pin: 18px; --header-h: 74px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--oat);color:var(--cocoa); font-family:var(--body);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:2px} body.no-scroll{overflow:hidden} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px} .narrow{width:100%;max-width:var(--narrow);margin-inline:auto;padding-inline:24px} .section{padding-block:96px} .section--tight{padding-block:64px} .band{background:var(--linen);border-block:1px solid var(--line)} h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.14;letter-spacing:-.015em} h2{font-size:clamp(30px,4vw,44px)} h3{font-size:22px;line-height:1.28} .wrap p,.narrow p,.prose p{max-width:66ch} .lede{font-size:18px;color:var(--cocoa-60);max-width:52ch} .note{font-size:13px;color:var(--cocoa-60)} .btn{ display:inline-flex;align-items:center;gap:10px; font:600 15px var(--body); padding:14px 26px;border-radius:100px;border:1px solid transparent;cursor:pointer; transition:background .25s ease,color .25s ease,border-color .25s ease; } .btn--solid{background:var(--cocoa);color:var(--linen)} .btn--solid:hover{background:var(--moss)} .btn--ghost{border-color:var(--cocoa);color:var(--cocoa)} .btn--ghost:hover{background:var(--cocoa);color:var(--linen)} .btn--honey{background:var(--honey);color:#fff} .btn--honey:hover{background:#A97430} /* Image frames */ .ph{ position:relative;overflow:hidden;border-radius:var(--r-pin); background: radial-gradient(120% 90% at 20% 15%, rgba(255,255,255,.55), transparent 60%), linear-gradient(160deg, var(--c1,#D8C9B6), var(--c2,#B9A38C)); } .ph::after{ content:attr(data-label); position:absolute;left:14px;bottom:12px; font-size:11px;letter-spacing:.06em;color:rgba(44,36,32,.5); } /* ---------- ad slots: hidden until ---------- */ .ad-slot{display:none;margin-block:40px} body.ads-on .ad-slot{ display:grid;place-items:center;min-height:var(--h,110px); background:rgba(44,36,32,.03);border:1px dashed var(--line);border-radius:10px; color:var(--cocoa-60);font-size:12px; } .ad-slot--tall{--h:300px} /* ============================================================ HEADER + MOBILE MENU ============================================================ */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(237,229,217,.9);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:20px} .logo{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:-.02em} .logo span{color:var(--moss)} .nav{display:flex;gap:28px;font-size:15px;font-weight:500} .nav a{position:relative;padding-block:4px} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--moss); transform:scaleX(0);transform-origin:left;transition:transform .28s ease} .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)} .header-cta{display:flex;align-items:center;gap:12px} .pin-btn{display:inline-flex;align-items:center;gap:8px;background:var(--cocoa);color:var(--linen); padding:10px 18px;border-radius:100px;font-size:14px;font-weight:600;transition:background .25s} .pin-btn:hover{background:var(--moss)} .menu-toggle{ display:none;background:none;border:0;cursor:pointer;padding:8px; width:42px;height:42px;align-items:center;justify-content:center; } .menu-toggle span{display:block;width:22px;height:1.6px;background:var(--cocoa);position:relative;transition:background .2s} .menu-toggle span::before,.menu-toggle span::after{ content:"";position:absolute;left:0;width:22px;height:1.6px;background:var(--cocoa); transition:transform .3s cubic-bezier(.2,.8,.25,1),top .2s; } .menu-toggle span::before{top:-7px} .menu-toggle span::after{top:7px} body.menu-open .menu-toggle span{background:transparent} body.menu-open .menu-toggle span::before{top:0;transform:rotate(45deg)} body.menu-open .menu-toggle span::after{top:0;transform:rotate(-45deg)} .drawer{ position:fixed;inset:var(--drawer-top,var(--header-h)) 0 0 0;z-index:55; background:var(--oat); padding:28px 24px 40px; transform:translateY(-12px);opacity:0;pointer-events:none; transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.25,1); overflow-y:auto; } body.menu-open .drawer{opacity:1;transform:none;pointer-events:auto} .drawer h4{font:700 12px var(--body);color:var(--cocoa-60);margin:26px 0 12px} .drawer-links{display:grid} .drawer-links a{ font-family:var(--display);font-size:26px;font-weight:500; padding:12px 0;border-bottom:1px solid var(--line); display:flex;justify-content:space-between;align-items:baseline; } .drawer-links a small{font:400 13px var(--body);color:var(--cocoa-60)} .drawer-sub{display:flex;flex-wrap:wrap;gap:8px} .drawer-sub a{border:1px solid var(--line);background:var(--linen);border-radius:100px;padding:8px 16px;font-size:14px;font-weight:500} .drawer .btn{margin-top:26px;width:100%;justify-content:center} /* ============================================================ HERO ============================================================ */ .hero{padding-block:80px 92px;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .hero-kicker{font-size:14px;font-weight:600;color:var(--moss);display:flex;align-items:center;gap:10px;margin-bottom:22px} .hero-kicker::before{content:"";width:34px;height:1.5px;background:var(--moss)} .hero-type{ font-family:var(--display); font-size:clamp(46px,7.2vw,92px); font-weight:500;line-height:1.05;letter-spacing:-.03em; margin-bottom:26px; } .rotator{ position:relative;display:inline-block; font-weight:300;color:var(--moss); font-variation-settings:"SOFT" 40,"WONK" 0; } .rotator .ch{display:inline-block;opacity:0;transform:translateY(.16em);filter:blur(4px)} .rotator .ch.in{opacity:1;transform:none;filter:blur(0); transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.25,1),filter .5s ease} .rotator .ul{ position:absolute;left:0;bottom:.06em;height:2px;width:100%; background:var(--honey);transform:scaleX(0);transform-origin:left; transition:transform .6s cubic-bezier(.2,.8,.25,1); } .rotator.drawn .ul{transform:scaleX(1)} .hero-sub{font-size:19px;color:var(--cocoa-60);max-width:44ch;margin-bottom:32px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero-meta{margin-top:34px;font-size:14px;color:var(--cocoa-60)} .hero-meta strong{color:var(--cocoa);font-weight:600} .collage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px} .collage .ph:nth-child(1){height:240px;--c1:#D9C7B0;--c2:#A8927A} .collage .ph:nth-child(2){height:180px;margin-top:44px;--c1:#C7CDBB;--c2:#8B9679} .collage .ph:nth-child(3){height:180px;--c1:#E2CFC4;--c2:#C09C8C} .collage .ph:nth-child(4){height:240px;margin-top:-26px;--c1:#E4D6BC;--c2:#BFA271} .collage-tag{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); background:var(--linen);border:1px solid var(--line); padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600; box-shadow:0 10px 26px rgba(44,36,32,.10);display:flex;align-items:center;gap:8px;white-space:nowrap; } .collage-tag i{width:7px;height:7px;border-radius:50%;background:var(--rose)} /* ============================================================ SECTION HEAD / ROOMS ============================================================ */ .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:44px;flex-wrap:wrap} .section-head a.more{font-size:15px;font-weight:600;color:var(--moss);border-bottom:1.5px solid transparent;transition:border-color .25s} .section-head a.more:hover{border-color:var(--moss)} .rooms{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .room{background:var(--oat);border:1px solid var(--line);border-radius:var(--r-pin); padding:22px 16px;text-align:center;transition:background .25s ease,transform .25s ease} .band .room{background:var(--oat)} .room:hover{background:#E5DBCB;transform:translateY(-3px)} .room svg{margin:0 auto 12px;display:block;stroke:var(--moss);fill:none;stroke-width:1.4} .room span{font-size:14px;font-weight:600;display:block} .room small{font-size:12px;color:var(--cocoa-60)} /* ============================================================ PIN GRID ============================================================ */ .pins{columns:3;column-gap:22px} .pins--2{columns:2} .pin{break-inside:avoid;margin-bottom:22px;position:relative; background:var(--linen);border:1px solid var(--line);border-radius:var(--r-pin);overflow:hidden} .pin .ph{border-radius:0} .pin .ph.tall{height:330px} .pin .ph.mid{height:250px} .pin .ph.short{height:190px} .pin-body{padding:18px 20px 22px} .pin-cat{font-size:12px;font-weight:700;color:var(--moss);margin-bottom:8px;display:block} .pin h3{margin-bottom:8px} .pin p{font-size:14.5px;color:var(--cocoa-60)} .pin-read{margin-top:14px;font-size:14px;font-weight:600;border-bottom:1.5px solid var(--honey);display:inline-block;padding-bottom:2px} .save{position:absolute;top:14px;right:14px;background:rgba(248,244,238,.94);color:var(--cocoa); border:0;border-radius:100px;padding:8px 15px;font:600 13px var(--body);cursor:pointer;opacity:0; transition:opacity .22s ease,background .22s ease} .pin:hover .save,.save:focus-visible{opacity:1} .save:hover{background:var(--cocoa);color:var(--linen)} /* ============================================================ GUIDES / PINTEREST / NEWSLETTER / AUTHOR ============================================================ */ .guides{display:grid;grid-template-columns:1fr 1fr;gap:0 60px} .guide{display:flex;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)} .guide-step{font-family:var(--display);font-size:20px;color:var(--honey);min-width:26px} .guide h3{font-size:19px;margin-bottom:4px} .guide p{font-size:14.5px;color:var(--cocoa-60)} .pinterest{background:var(--cocoa);color:var(--linen)} .pinterest .lede{color:rgba(248,244,238,.72)} .pin-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px} .pin-strip .ph{height:150px;border-radius:12px} .pinterest .btn--ghost{border-color:rgba(248,244,238,.5);color:var(--linen)} .pinterest .btn--ghost:hover{background:var(--linen);color:var(--cocoa)} .split{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center} .form{display:flex;gap:10px;margin-top:26px;max-width:460px;flex-wrap:wrap} .form input,.form textarea{flex:1;min-width:200px;font:400 16px var(--body);color:var(--cocoa); background:var(--linen);border:1px solid var(--line);padding:14px 18px;border-radius:100px} .form textarea{border-radius:16px;min-height:140px;resize:vertical;width:100%} .form input::placeholder,.form textarea::placeholder{color:var(--cocoa-60)} .author{display:flex;gap:20px;align-items:center;background:var(--linen); border:1px solid var(--line);border-radius:var(--r-pin);padding:26px} .avatar{width:76px;height:76px;border-radius:50%;flex:0 0 76px;--c1:#D9C7B0;--c2:#9E8A72} .author h3{font-size:18px;margin-bottom:4px} .author p{font-size:14px;color:var(--cocoa-60)} /* ============================================================ ARCHIVE / CATEGORY ============================================================ */ .page-head{padding-block:64px 48px;border-bottom:1px solid var(--line)} .crumbs{font-size:13px;color:var(--cocoa-60);margin-bottom:18px} .crumbs a:hover{color:var(--moss)} .page-head h1{font-size:clamp(38px,5.5vw,62px);margin-bottom:16px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .chip{border:1px solid var(--line);background:var(--linen);border-radius:100px; padding:8px 16px;font-size:14px;font-weight:500;transition:background .2s,color .2s} .chip:hover,.chip[aria-current="page"]{background:var(--cocoa);color:var(--linen);border-color:var(--cocoa)} .featured{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center; background:var(--linen);border:1px solid var(--line);border-radius:var(--r-pin); overflow:hidden;margin-bottom:56px} .featured .ph{height:100%;min-height:320px;border-radius:0} .featured-body{padding:38px 40px 38px 8px} .featured h2{font-size:clamp(26px,3.2vw,36px);margin:10px 0 14px} .pagination{display:flex;gap:8px;justify-content:center;margin-top:48px} .pagination a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line); border-radius:50%;font-size:15px;font-weight:600;transition:background .2s,color .2s} .pagination a:hover,.pagination a[aria-current="page"]{background:var(--cocoa);color:var(--linen);border-color:var(--cocoa)} /* ============================================================ SINGLE POST ============================================================ */ .post-head{padding-block:56px 36px} .post-head h1{font-size:clamp(34px,5vw,56px);max-width:20ch;margin-bottom:20px} .post-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:14px;color:var(--cocoa-60)} .post-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line)} .post-hero{margin-block:36px} .post-hero .ph{height:min(58vw,520px);--c1:#DCCAB4;--c2:#A98F72} .post-hero figcaption{font-size:13px;color:var(--cocoa-60);margin-top:10px} .prose{font-size:18px;line-height:1.75;padding-inline:24px} .prose > *{max-width:var(--narrow);margin-inline:auto} .prose p{margin-bottom:26px;max-width:68ch} .prose h2{font-size:clamp(26px,3.4vw,34px);margin:52px 0 16px;scroll-margin-top:100px} .prose h3{font-size:22px;margin:36px 0 12px} .prose ul,.prose ol{margin:0 auto 26px;padding-left:22px;max-width:66ch} .prose li{margin-bottom:9px} .prose a{color:var(--moss);border-bottom:1.5px solid var(--line);transition:border-color .2s} .prose a:hover{border-color:var(--moss)} .prose strong{font-weight:700} .pull{ font-family:var(--display);font-size:26px;line-height:1.35;color:var(--cocoa); border-left:2px solid var(--honey);padding-left:24px;margin:44px auto;max-width:56ch;font-weight:400; } .callout{ background:var(--linen);border:1px solid var(--line);border-radius:var(--r-pin); padding:24px 26px;margin:36px auto; } .callout h4{font-family:var(--body);font-size:14px;font-weight:700;margin-bottom:8px;color:var(--moss)} .callout p{margin:0;font-size:16px} .post-fig{margin:40px auto;position:relative;max-width:var(--narrow)} .post-fig .ph{height:min(70vw,560px)} .post-fig figcaption{font-size:13px;color:var(--cocoa-60);margin-top:10px} .pin-it{position:absolute;top:16px;left:16px;background:rgba(248,244,238,.94); border:0;border-radius:100px;padding:9px 16px;font:600 13px var(--body);cursor:pointer; opacity:0;transition:opacity .22s,background .22s} .post-fig:hover .pin-it,.pin-it:focus-visible{opacity:1} .pin-it:hover{background:var(--cocoa);color:var(--linen)} .toc{background:var(--linen);border:1px solid var(--line);border-radius:var(--r-pin); padding:24px 26px;margin:0 auto 44px} .toc h4{font-family:var(--body);font-size:13px;font-weight:700;margin-bottom:12px;color:var(--cocoa-60)} .toc ol{list-style:none;padding:0;counter-reset:toc;display:grid;gap:9px} .toc li{counter-increment:toc;font-size:15.5px} .toc li::before{content:counter(toc);color:var(--honey);font-family:var(--display);margin-right:10px} .toc a{border-bottom:1px solid transparent} .toc a:hover{border-color:var(--moss);color:var(--moss)} .product{ display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:center; background:var(--linen);border:1px solid var(--line);border-radius:var(--r-pin); padding:22px;margin:40px auto;max-width:var(--narrow); } .product .ph{height:150px;--c1:#E4D6BC;--c2:#BFA271} .product-tag{font:700 11px var(--body);color:var(--honey);display:block;margin-bottom:6px} .product h4{font-family:var(--display);font-size:20px;margin-bottom:6px} .product p{font-size:14.5px;color:var(--cocoa-60);margin-bottom:14px} .product .btn{padding:11px 22px;font-size:14px} .product-price{font-size:14px;font-weight:600;margin-left:12px} .table-wrap{overflow-x:auto;margin:36px auto;max-width:var(--narrow)} .table-wrap table{border-collapse:collapse;width:100%;font-size:15px;background:var(--linen); border:1px solid var(--line);border-radius:12px;overflow:hidden} .table-wrap th,.table-wrap td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)} .table-wrap th{font:700 13px var(--body);background:#E9E1D5} .table-wrap tr:last-child td{border-bottom:0} .disclosure{font-size:13px;color:var(--cocoa-60);background:rgba(44,36,32,.04); border-radius:12px;padding:14px 18px;margin:0 auto 36px;max-width:var(--narrow)} .post-footer{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px} .tag{font-size:13px;border:1px solid var(--line);border-radius:100px;padding:6px 14px;color:var(--cocoa-60)} .tag:hover{color:var(--moss);border-color:var(--moss)} .share{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--cocoa-60);flex-wrap:wrap} .share a{border:1px solid var(--line);border-radius:100px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--cocoa)} .share a:hover{background:var(--cocoa);color:var(--linen);border-color:var(--cocoa)} /* about page */ .about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center} .about-grid .ph{height:420px;--c1:#D9C7B0;--c2:#A8927A} .values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px} .value{background:var(--linen);border:1px solid var(--line);border-radius:var(--r-pin);padding:26px} .value h3{font-size:19px;margin-bottom:8px} .value p{font-size:14.5px;color:var(--cocoa-60)} /* shop hub cards */ .shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .shop-card{background:var(--linen);border:1px solid var(--line);border-radius:var(--r-pin);overflow:hidden} .shop-card .ph{height:200px;border-radius:0} .shop-card div{padding:20px} .shop-card h3{font-size:19px;margin-bottom:6px} .shop-card p{font-size:14.5px;color:var(--cocoa-60)} /* ============================================================ FOOTER ============================================================ */ .site-footer{background:var(--linen);border-top:1px solid var(--line);padding-block:56px 30px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px} .foot h4{font-family:var(--body);font-size:13px;font-weight:700;margin-bottom:14px} .foot ul{list-style:none;display:grid;gap:9px;font-size:14.5px;color:var(--cocoa-60)} .foot a:hover{color:var(--moss)} .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--cocoa-60)} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:980px){ .hero-grid,.split,.about-grid{grid-template-columns:1fr;gap:44px} .guides{grid-template-columns:1fr;gap:0} .pins,.pins--2{columns:2} .rooms{grid-template-columns:repeat(3,1fr)} .pin-strip{grid-template-columns:repeat(3,1fr)} .foot-grid{grid-template-columns:1fr 1fr} .featured{grid-template-columns:1fr} .featured .ph{min-height:240px} .featured-body{padding:28px} .values,.shop-grid{grid-template-columns:1fr} .nav{display:none} .menu-toggle{display:flex} } @media (max-width:600px){ body{font-size:16.5px} .section{padding-block:60px} .pins,.pins--2{columns:1} .rooms{grid-template-columns:repeat(2,1fr)} .pin-strip{grid-template-columns:repeat(2,1fr)} .collage .ph:nth-child(2),.collage .ph:nth-child(4){margin-top:0} .collage-tag{display:none} .foot-grid{grid-template-columns:1fr} .header-cta .pin-btn{display:none} .product{grid-template-columns:1fr} .product .ph{height:180px} .prose{font-size:17px;padding-inline:20px} .narrow{padding-inline:20px} .wrap{padding-inline:20px} .drawer-links a{font-size:22px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .rotator .ch{opacity:1;transform:none;filter:none} .rotator .ul{transform:scaleX(1)} } /* ============================================================ cozyde.com — WordPress layer Everything below adapts the static design to real WP output. ============================================================ */ /* ---------- real images inside the placeholder frames ---------- */ .ph{background-color:#D8C9B6} .ph > img,.ph > a > img,.ph > picture > img{ width:100%;height:100%;object-fit:cover;display:block; } .ph.has-img::after{content:none} .ph--auto{height:auto!important} .ph--auto > img{height:auto} a.ph{display:block} /* ---------- admin bar: push the sticky header and drawer down ---------- */ body.admin-bar .site-header{top:32px} body.admin-bar .drawer{--drawer-top:calc(var(--header-h) + 32px)} @media screen and (max-width:782px){ body.admin-bar .site-header{top:46px} body.admin-bar .drawer{--drawer-top:calc(var(--header-h) + 46px)} } /* ---------- accessibility helpers WP expects ---------- */ .screen-reader-text{ border:0;clip-path:inset(50%);height:1px;width:1px;margin:-1px; overflow:hidden;padding:0;position:absolute!important;word-wrap:normal!important; } .skip-link:focus{ position:fixed!important;top:12px;left:12px;z-index:200;clip-path:none; width:auto;height:auto;background:var(--cocoa);color:var(--linen); padding:12px 20px;border-radius:100px;font:600 14px var(--body); } /* ---------- logo ---------- */ .logo{display:inline-flex;align-items:center;gap:10px} .logo img,.logo svg{height:30px;width:auto;display:block} .site-footer .logo img,.site-footer .logo svg{height:26px} /* ---------- nav: WP menu markup ---------- */ .nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0} .nav li{position:relative} .nav .current-menu-item > a::after, .nav .current-menu-parent > a::after, .nav .current-page-ancestor > a::after{transform:scaleX(1)} .nav .sub-menu{ position:absolute;top:100%;left:-14px;min-width:210px;display:grid;gap:0; background:var(--linen);border:1px solid var(--line);border-radius:14px; padding:8px;box-shadow:0 16px 34px rgba(44,36,32,.10); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .22s ease,transform .26s ease,visibility .22s; } .nav li:hover > .sub-menu,.nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none} .nav .sub-menu a{display:block;padding:9px 14px;border-radius:9px;font-size:14.5px} .nav .sub-menu a::after{content:none} .nav .sub-menu a:hover{background:var(--oat);color:var(--moss)} .drawer-links ul,.drawer-sub ul,.foot ul{list-style:none;margin:0;padding:0} .drawer-links ul{display:grid} .drawer-sub ul{display:flex;flex-wrap:wrap;gap:8px} .drawer-links .sub-menu{display:none} .drawer-sub a{display:inline-block} .foot ul{display:grid;gap:9px} /* ---------- WP core content classes inside .prose ---------- */ .prose img{border-radius:var(--r-pin)} .prose figure{margin:40px auto} .prose figcaption,.wp-element-caption{font-size:13px;color:var(--cocoa-60);margin-top:10px;text-align:left} .prose .alignwide{max-width:1000px} .prose .alignfull{max-width:none;width:100%} .prose .aligncenter{margin-inline:auto;text-align:center} .prose .alignleft{float:left;margin:6px 28px 22px 0;max-width:min(46%,340px)} .prose .alignright{float:right;margin:6px 0 22px 28px;max-width:min(46%,340px)} .prose .wp-block-image{margin-block:40px} .prose .wp-block-image img{width:100%;height:auto} .prose blockquote{ font-family:var(--display);font-size:26px;line-height:1.35; border-left:2px solid var(--honey);padding-left:24px;margin:44px auto; max-width:56ch;font-weight:400; } .prose blockquote p{font-size:inherit;font-family:inherit;margin-bottom:12px} .prose blockquote cite{font:400 14px var(--body);color:var(--cocoa-60);font-style:normal} .prose hr,.wp-block-separator{ border:0;border-top:1px solid var(--line);margin:44px auto;max-width:var(--narrow); } .prose code,.prose kbd{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em; background:rgba(44,36,32,.06);padding:2px 6px;border-radius:6px; } .prose pre{ background:var(--cocoa);color:var(--linen);padding:20px 22px;border-radius:var(--r-pin); overflow-x:auto;margin-bottom:26px;font-size:14.5px; } .prose pre code{background:none;padding:0;color:inherit} .prose .wp-block-embed,.prose iframe{max-width:var(--narrow);margin-inline:auto} .prose iframe{width:100%;border:0;border-radius:var(--r-pin)} .prose .wp-block-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px} .prose .wp-block-button__link{ display:inline-flex;align-items:center;background:var(--cocoa);color:var(--linen); padding:14px 26px;border-radius:100px;font:600 15px var(--body); } .prose .wp-block-button__link:hover{background:var(--moss)} .prose .wp-block-table{margin:36px auto;max-width:var(--narrow);overflow-x:auto} .prose .wp-block-table table{ border-collapse:collapse;width:100%;font-size:15px;background:var(--linen); border:1px solid var(--line);border-radius:12px;overflow:hidden; } .prose .wp-block-table th,.prose .wp-block-table td{ padding:14px 16px;text-align:left;border-bottom:1px solid var(--line); } .prose .wp-block-table th{font:700 13px var(--body);background:#E9E1D5} .prose .wp-block-table tr:last-child td{border-bottom:0} .wp-block-group.is-callout{ background:var(--linen);border:1px solid var(--line);border-radius:var(--r-pin); padding:24px 26px;margin:36px auto;max-width:var(--narrow); } .wp-block-group.is-callout > *{margin-bottom:0} .wp-block-group.is-callout h4,.wp-block-group.is-callout h3{ font-family:var(--body);font-size:14px;font-weight:700;margin:0 0 8px;color:var(--moss); } /* ---------- comments ---------- */ .comments{max-width:var(--narrow);margin:56px auto 0;padding-inline:24px} .comments h2,.comments h3{font-size:24px;margin-bottom:20px} .comment-list{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:20px} .comment-list ol{list-style:none;padding-left:24px;margin-top:20px;display:grid;gap:20px} .comment-body{ background:var(--linen);border:1px solid var(--line); border-radius:var(--r-pin);padding:20px 22px; } .comment-meta{font-size:13px;color:var(--cocoa-60);margin-bottom:8px} .comment-author img{border-radius:50%;margin-right:10px;vertical-align:middle} .comment-form{display:grid;gap:12px;max-width:560px} .comment-form label{font:600 13px var(--body);color:var(--cocoa-60)} .comment-form input[type=text],.comment-form input[type=email], .comment-form input[type=url],.comment-form textarea{ font:400 16px var(--body);color:var(--cocoa);background:var(--linen); border:1px solid var(--line);padding:14px 18px;border-radius:16px;width:100%; } .comment-form input[type=submit]{ background:var(--cocoa);color:var(--linen);border:0;border-radius:100px; padding:14px 26px;font:600 15px var(--body);cursor:pointer;justify-self:start; } .comment-form input[type=submit]:hover{background:var(--moss)} .comment-reply-link{font-size:13.5px;font-weight:600;color:var(--moss)} /* ---------- pagination from paginate_links() ---------- */ .pagination .page-numbers{ width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line); border-radius:50%;font-size:15px;font-weight:600;transition:background .2s,color .2s; } .pagination .page-numbers:hover,.pagination .page-numbers.current{ background:var(--cocoa);color:var(--linen);border-color:var(--cocoa); } .pagination .page-numbers.dots{border-color:transparent} .pagination .next,.pagination .prev{width:auto;padding-inline:20px;border-radius:100px} /* ---------- search + 404 ---------- */ .searchform{display:flex;gap:10px;margin-top:26px;max-width:460px;flex-wrap:wrap} .searchform input[type=search]{ flex:1;min-width:200px;font:400 16px var(--body);color:var(--cocoa); background:var(--linen);border:1px solid var(--line);padding:14px 18px;border-radius:100px; } .empty-state{padding-block:80px;text-align:center} .empty-state h2{margin-bottom:12px} .empty-state .lede{margin-inline:auto} /* ---------- Elementor-built pages keep the site background ---------- */ .elementor-page .site-main{background:var(--oat)} /* ---------- forms plugged into the design (Elementor Pro / Reach) ---------- */ .form .elementor-widget-form,.form-wrap .elementor-widget-form{width:100%} .cz-form .elementor-field-group{margin-bottom:0} .cz-form .elementor-field-textual{ font:400 16px var(--body)!important;color:var(--cocoa)!important; background:var(--linen)!important;border:1px solid var(--line)!important; padding:14px 18px!important;border-radius:100px!important;min-height:auto!important; } .cz-form textarea.elementor-field-textual{border-radius:16px!important;min-height:140px!important} .cz-form .elementor-button,.cz-form button[type=submit]{ background:var(--cocoa)!important;color:var(--linen)!important;border:0!important; border-radius:100px!important;padding:14px 26px!important; font:600 15px var(--body)!important;cursor:pointer; } .cz-form .elementor-button:hover,.cz-form button[type=submit]:hover{background:var(--moss)!important} .cz-form .elementor-message{font-size:14px;margin-top:10px} .cz-subscribe form{display:flex;gap:10px;flex-wrap:wrap;max-width:460px;margin-top:26px} .cz-subscribe input[type=email],.cz-subscribe input[type=text]{ flex:1;min-width:200px;font:400 16px var(--body);color:var(--cocoa); background:var(--linen);border:1px solid var(--line);padding:14px 18px;border-radius:100px; } .cz-subscribe button,.cz-subscribe input[type=submit]{ background:var(--cocoa);color:var(--linen);border:0;border-radius:100px; padding:14px 26px;font:600 15px var(--body);cursor:pointer; } .cz-subscribe button:hover,.cz-subscribe input[type=submit]:hover{background:var(--moss)} .cz-form-note{font-size:13px;color:var(--cocoa-60);margin-top:12px} /* ---------- room icon grid falls back gracefully with many categories ---------- */ .rooms--wrap{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} /* ---------- safety: nothing may push the page sideways ---------- */ html,body{overflow-x:clip;max-width:100%} .wrap,.narrow,.prose{min-width:0}