/* Theme Name: Fali On Tour Homepage Description: Custom homepage design for faliontour.blog. Overrides only the front page — every other page keeps using the parent theme. Author: Fali Damania Template: marni Version: 2.4 */ /* ============================================ Parent theme set to "marni" (Marni by red_sun). If your Marni theme folder was renamed on your server, check Appearance > Themes in wp-admin to confirm the folder name matches "marni" before activating. ============================================ */ /* ============================================ Fix: Marni's own logo-width Customizer setting doesn't carry over to a new child theme, so its generated CSS ends up as "max-width:px" (no value) and the logo renders at full native size. This overrides it site-wide, not just on the homepage. ============================================ */ .logowrap.logo-img{max-width:200px;} .logowrap.logo-img img{max-width:100%;height:auto;} :root{ --ink:#1B1B18; --paper:#EAE3D3; --paper-raised:#F2ECDD; --brass:#B8863B; --brass-dark:#8C6527; --clay:#A84B2E; --moss:#5C6B4F; --steel:#46566B; --line:rgba(27,27,24,0.16); } /* ============================================ Site-wide theming — applies to posts, pages, archives, everywhere. Uses !important on color/background since Marni prints its own Customizer-generated colors late in , after this stylesheet. ============================================ */ body{background:var(--paper) !important;color:var(--ink);} .site-header,.topbar,.header-wrap{background:var(--paper) !important;} .site-header{border-bottom:1px solid var(--line);} .topbar-content i,.topbar-content a{color:var(--ink) !important;} .main-navigation ul li a{ color:var(--ink) !important; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; } .main-navigation ul li a:hover{color:var(--brass) !important;} .categories a{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--clay) !important; border:1px dashed currentColor; padding:5px 12px; display:inline-flex; align-items:center; gap:7px; text-decoration:none; } .categories a::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--paper); border:1px solid currentColor; display:inline-block; } .entry-title,.entry-title a{color:var(--ink) !important;} .entry-meta,.entry-meta a,.post-info{ color:#7a7a6f !important; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; } .entry-content a,.comment-text a,.textwidget a{ color:var(--brass-dark) !important; border-bottom-color:var(--brass-dark) !important; } .entry-content a:hover{color:var(--brass) !important;} .entry-content h1,.entry-content h2,.entry-content h3{ font-family:'Big Shoulders Display', sans-serif !important; font-weight:700 !important; letter-spacing:0.01em !important; font-size:1.7em !important; line-height:1.25 !important; color:var(--ink) !important; margin-top:1.6em !important; margin-bottom:0.6em !important; padding-top:0.8em !important; border-top:1px solid var(--line) !important; } .entry-content > h1:first-child, .entry-content > h2:first-child, .entry-content > h3:first-child, .entry-content > .wp-block-image:first-child + h1, .entry-content > .wp-block-image:first-child + h2{ margin-top:0 !important; padding-top:0 !important; border-top:none !important; } .button,.reply,input[type="submit"]{ background:var(--ink) !important; border-color:var(--ink) !important; color:var(--paper) !important; font-family:'IBM Plex Mono', monospace; letter-spacing:0.08em; text-transform:uppercase; } .button:hover,.reply:hover,input[type="submit"]:hover{ background:var(--brass-dark) !important; border-color:var(--brass-dark) !important; } .widget-title{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink) !important; } .footer-wrap{background:var(--ink) !important;} .footer-info-wrap,.footer-info-wrap a{color:var(--paper) !important;} #sidebar-instagram .widget-title{color:var(--paper) !important;} .widget_mc4wp_form_widget .mc4wp-form label{ color:rgba(234,227,211,0.7) !important; font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; } .widget_mc4wp_form_widget .mc4wp-form input[type="email"]{ background:transparent; border:1px solid rgba(234,227,211,0.4); color:var(--paper) !important; padding:12px 16px; } .widget_mc4wp_form_widget .mc4wp-form input[type="submit"]{ background:var(--brass) !important; color:var(--ink) !important; border-color:var(--brass) !important; } .tnail.tnail-top{display:none !important;} .fot-page *{box-sizing:border-box;margin:0;padding:0;} .fot-page{ background:var(--paper); color:var(--ink); font-family:'Source Serif 4', serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .fot-page .wrap{max-width:1180px;margin:0 auto;padding:0 32px;} .fot-page .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass-dark); } .fot-page .display{ font-family:'Big Shoulders Display', sans-serif; text-transform:uppercase; letter-spacing:0.01em; line-height:0.92; } /* header */ .fot-page header{ position:sticky; top:0; z-index:50; background:rgba(234,227,211,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); } .fot-page header .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; } .fot-page .wordmark{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:22px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; } .fot-page .wordmark::before{ content:""; width:9px;height:9px;border-radius:50%; background:var(--brass); display:inline-block; } .fot-page nav{display:flex; align-items:center; gap:34px;} .fot-page nav a{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:3px; transition:border-color .2s; } .fot-page nav a:hover{border-color:var(--brass);} .fot-page .ig-dot{ width:6px;height:6px;border-radius:50%;background:var(--clay); display:inline-block; margin-left:6px; } .fot-page .menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; } .fot-page .menu-toggle span{ display:block; width:100%; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; } .fot-page .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .fot-page .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .fot-page .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* page hero (About / Contact) */ .fot-page .page-hero{padding:64px 0 40px; border-bottom:1px solid var(--ink);} .fot-page .page-title{ font-family:'Big Shoulders Display', sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(40px,7vw,72px); color:var(--ink) !important; margin-top:10px; } /* prose content shared by page templates */ .fot-page .page-body{padding:56px 0 90px;} .fot-page .wrap.narrow{max-width:740px;} .fot-page .prose{font-size:17px; line-height:1.75; color:#3a3a34;} .fot-page .prose > *{margin-bottom:22px;} .fot-page .prose h1,.fot-page .prose h2,.fot-page .prose h3{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase; color:var(--ink) !important; letter-spacing:0.02em; margin-top:48px; margin-bottom:16px; padding-top:24px; border-top:1px solid var(--line); } .fot-page .prose h1:first-child,.fot-page .prose h2:first-child{margin-top:0; padding-top:0; border-top:none;} .fot-page .prose strong{color:var(--brass-dark);} .fot-page .prose em{font-style:italic; color:var(--brass-dark);} .fot-page .prose img{width:100%; height:auto; border:1px solid var(--line); display:block; margin:8px 0 30px;} .fot-page .prose ul{list-style:none; margin-left:0;} .fot-page .prose ul li{position:relative; padding-left:22px; margin-bottom:10px;} .fot-page .prose ul li::before{content:"\2013"; position:absolute; left:0; color:var(--brass-dark);} .fot-page .prose hr{border:none; border-top:1px solid var(--line); margin:40px 0;} .fot-page .prose a{color:var(--brass-dark); border-bottom:1px solid var(--brass-dark); text-decoration:none;} .fot-page .prose a:hover{color:var(--brass);} /* Contact page: hide the duplicate in-content H1 (hero already shows the real title) and the manual --- dividers (h2 already carries its own divider line, so the hr rules were doubling up) */ .fot-page .contact-prose h1{display:none;} .fot-page .contact-prose hr{display:none;} .fot-page .cat-description{ font-style:italic; font-size:18px; line-height:1.6; color:#3a3a34; max-width:640px; margin-top:16px; } .fot-page .archive-dispatches{padding:56px 0 90px;} .fot-page .archive-pagination{ display:flex; justify-content:center; gap:12px; margin-top:56px; flex-wrap:wrap; } .fot-page .archive-pagination .page-numbers{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); text-decoration:none; border:1px solid var(--line); padding:11px 18px; } .fot-page .archive-pagination a.page-numbers:hover{border-color:var(--brass); color:var(--brass-dark);} .fot-page .archive-pagination .page-numbers.current{background:var(--ink); color:var(--paper) !important; border-color:var(--ink);} .fot-page .no-posts{font-style:italic; color:#7a7a6f; padding:40px 0;} /* Contact Form 7 fields, if present on a page */ .fot-page .wpcf7-form p{margin-bottom:16px;} .fot-page .wpcf7-form input[type="text"], .fot-page .wpcf7-form input[type="email"], .fot-page .wpcf7-form input[type="tel"], .fot-page .wpcf7-form textarea{ width:100%; box-sizing:border-box; background:var(--paper-raised); border:1px solid var(--line); color:var(--ink) !important; padding:12px 14px; font-family:'Source Serif 4', serif; font-size:15px; } .fot-page .wpcf7-form textarea{min-height:140px;} .fot-page .wpcf7-submit{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; background:var(--ink) !important; color:var(--paper) !important; border:1px solid var(--ink) !important; padding:14px 28px; cursor:pointer; } .fot-page .wpcf7-submit:hover{background:var(--brass-dark) !important; border-color:var(--brass-dark) !important;} /* hero */ .fot-page .hero{padding:88px 0 40px; position:relative;} .fot-page .hero .eyebrow{margin-bottom:22px;} .fot-page .hero h1{ font-size:clamp(54px, 10vw, 128px); font-weight:800; color:var(--ink) !important; } .fot-page .hero h1 span{color:var(--brass);} .fot-page .waveform{width:100%; height:86px; margin:18px 0 30px; display:block;} .fot-page .hero-sub{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:26px; } .fot-page .hero-tagline{ font-style:italic; font-size:22px; line-height:1.5; max-width:520px; color:var(--ink); } .fot-page .cta{ font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper); background:var(--ink); padding:15px 26px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; transition:background .2s; } .fot-page .cta:hover{background:var(--brass-dark);} .fot-page .cta::after{content:"→";} /* laminate tag */ .fot-page .laminate{ display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; padding:5px 12px 5px 9px; border:1px dashed currentColor; position:relative; } .fot-page .laminate::before{ content:""; width:6px;height:6px;border-radius:50%; background:var(--paper); border:1px solid currentColor; flex-shrink:0; } .fot-page .tag-travel{color:var(--clay);} .fot-page .tag-life{color:var(--steel);} .fot-page .tag-sound{color:var(--steel);} .fot-page .tag-health{color:var(--moss);} .fot-page .tag-lessons{color:var(--brass-dark);} .fot-page .tag-wellness{color:var(--moss);} /* featured */ .fot-page .featured{padding:64px 0 76px;} .fot-page .featured-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center; border-top:1px solid var(--ink); padding-top:40px; } .fot-page .featured-img{aspect-ratio:4/3.1; overflow:hidden; background:var(--paper-raised);} .fot-page .featured-img img{width:100%; height:100%; object-fit:cover; display:block;} .fot-page .featured-text .laminate{margin-bottom:20px;} .fot-page .featured-text h2{font-size:clamp(32px,4vw,50px); font-weight:700; margin-bottom:18px; color:var(--ink) !important;} .fot-page .featured-text p{font-size:17px; line-height:1.7; color:#3a3a34; margin-bottom:22px; max-width:46ch;} .fot-page .byline{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--brass-dark); margin-bottom:14px; } .fot-page .read-link{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px; } /* dispatches grid */ .fot-page .dispatches{padding:0 0 80px;} .fot-page .section-head{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--ink); padding-top:18px; margin-bottom:36px; } .fot-page .section-head h3{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase; font-size:26px; letter-spacing:0.02em; color:var(--ink) !important; } .fot-page .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;} .fot-page .card{display:flex; flex-direction:column; background:var(--paper-raised); border:1px solid var(--line);} .fot-page .card-img{aspect-ratio:1/1; overflow:hidden;} .fot-page .card-img img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s;} .fot-page .card:hover .card-img img{transform:scale(1.045);} .fot-page .card-body{padding:22px 22px 26px; display:flex; flex-direction:column; gap:12px; flex:1;} .fot-page .card-body .laminate{align-self:flex-start;} .fot-page .card-body h4{font-size:21px; line-height:1.25; font-weight:600;} .fot-page .card-body h4 a{color:var(--ink); text-decoration:none;} .fot-page .card-excerpt{font-size:14.5px;color:#5a5a52;line-height:1.55;} .fot-page .card-meta{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:#7a7a6f; margin-top:auto; padding-top:8px; } /* rider / categories */ .fot-page .rider{background:var(--ink); color:var(--paper); padding:64px 0;} .fot-page .rider .wrap > .eyebrow{color:var(--brass); margin-bottom:8px;} .fot-page .rider h3{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase; font-size:34px; margin-bottom:32px; color:var(--paper) !important; } .fot-page .band-row{display:flex; flex-wrap:wrap; gap:14px;} /* ============================================ Explicit :visited colors — without these, browsers apply their own dimmed default color to any link you've already clicked, regardless of what color the un-visited rule sets. This pins every link's color so it never depends on your browsing history. ============================================ */ .fot-page .wordmark:visited{color:var(--ink) !important;} .fot-page nav a:visited{color:var(--ink) !important;} .fot-page .cta:visited{color:var(--paper) !important;} .fot-page .read-link:visited{color:var(--ink) !important;} .fot-page .band:visited{color:var(--paper) !important;} .fot-page .card-body h4 a:visited{color:var(--ink) !important;} .fot-page footer a:visited{color:#7a7a6f !important;} .fot-page .prose a:visited{color:var(--brass-dark) !important;} .fot-page .entry-content a:visited{color:var(--brass-dark) !important;} .fot-page .archive-pagination .page-numbers:visited{color:var(--ink) !important;} .fot-page .entry-title a:visited{color:var(--ink) !important;} .fot-page .main-navigation ul li a:visited{color:var(--ink) !important;} .fot-page .band{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--paper) !important; border:1px solid rgba(234,227,211,0.35); padding:13px 20px; text-decoration:none; display:flex; align-items:center; gap:10px; transition:border-color .2s, color .2s; } .fot-page .band span{color:var(--brass); font-size:11px;} .fot-page .band-count{ margin-left:auto; color:rgba(234,227,211,0.5) !important; font-size:11px; } .fot-page .band:hover .band-count{color:var(--brass) !important;} .fot-page .band:hover{border-color:var(--brass); color:var(--brass);} /* newsletter */ .fot-page .rider-sheet{ margin-top:56px; padding-top:40px; border-top:1px solid rgba(234,227,211,0.25); display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; } .fot-page .rider-sheet h4{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase; font-size:22px; margin-bottom:10px; color:var(--paper); } .fot-page .rider-sheet p{color:rgba(234,227,211,0.7); font-size:15px; max-width:44ch; line-height:1.6;} .fot-page .sub-form{display:flex; gap:0; min-width:340px;} .fot-page .sub-form input{ flex:1; background:transparent; border:1px solid rgba(234,227,211,0.4); border-right:none; color:var(--paper); padding:14px 16px; font-family:'Source Serif 4', serif; font-size:14px; } .fot-page .sub-form input::placeholder{color:rgba(234,227,211,0.45);} .fot-page .sub-form button{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; background:var(--brass); color:var(--ink); border:1px solid var(--brass); padding:0 22px; cursor:pointer; } .fot-page .sub-form{min-width:340px;} .fot-page .sub-form .mc4wp-form-fields{display:flex; align-items:stretch; gap:0; flex-wrap:wrap;} .fot-page .sub-form .mc4wp-form-fields p{margin:0;} .fot-page .sub-form .mc4wp-form-fields p:first-child{flex:1; min-width:200px;} .fot-page .sub-form .mc4wp-form label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(234,227,211,0.6); margin-bottom:8px; } .fot-page .sub-form .mc4wp-form input[type="email"]{ box-sizing:border-box; width:100%; background:transparent; border:1px solid rgba(234,227,211,0.4); color:var(--paper) !important; padding:14px 16px; font-family:'Source Serif 4', serif; font-size:14px; } .fot-page .sub-form .mc4wp-form input[type="email"]::placeholder{color:rgba(234,227,211,0.45); opacity:1;} .fot-page .sub-form .mc4wp-form input[type="submit"], .fot-page .sub-form .mc4wp-form button[type="submit"]{ box-sizing:border-box; height:100%; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; background:var(--brass) !important; color:var(--ink) !important; border:1px solid var(--brass) !important; padding:14px 22px; cursor:pointer; } .fot-page .sub-form .mc4wp-response{color:rgba(234,227,211,0.7); font-size:13px; margin-top:10px;} /* footer */ .fot-page footer{padding:34px 0;} .fot-page footer .wrap{ display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.04em; color:#7a7a6f; } .fot-page footer a{color:#7a7a6f;} @media (max-width:900px){ .fot-page .featured-grid{grid-template-columns:1fr;} .fot-page .grid3{grid-template-columns:1fr;} .fot-page nav{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px 32px 20px; } .fot-page nav.nav-open{display:flex;} .fot-page nav a{width:100%; padding:14px 0; border-bottom:1px solid var(--line);} .fot-page nav a:last-child{border-bottom:none;} .fot-page .menu-toggle{display:flex;} .fot-page .rider-sheet{grid-template-columns:1fr;} .fot-page .sub-form{min-width:0;} } @media (prefers-reduced-motion: reduce){ .fot-page .card-img img{transition:none;} .fot-page #wavepath{animation:none !important;} }