/* Armonime — shared styles for all subpages ------------------------------------------------ Each page sets its accent via inline style on : style="--accent:#4A6B50" 8 brand-spec dimension colors (from Notion): 01 Environmental #4A6B50 05 Physical #47919C 02 Social #B74645 06 Emotional #D78495 03 Financial #DDB926 07 Intellectual #4A6B9A 04 Occupational #6C391E 08 Spiritual #9285B8 */ :root{ --env:#4A6B50; --soc:#B74645; --fin:#DDB926; --occ:#6C391E; --phy:#47919C; --emo:#D78495; --int:#4A6B9A; --spi:#9285B8; --ink:#1c2530; --paper:#f6efe4; --paper-2:#efe5d3; --accent: var(--env); --rule: rgba(28,37,48,0.14); } *{margin:0;padding:0;box-sizing:border-box} html,body{background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;font-weight:400;line-height:1.6;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit} /* Logo gradient ring (subtle) for hero backgrounds */ .brand-gradient-bg{ position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0.55; background: radial-gradient(circle at 18% 22%, rgba(183,70,69,0.35) 0%, transparent 38%), radial-gradient(circle at 78% 30%, rgba(220,166,134,0.38) 0%, transparent 42%), radial-gradient(circle at 50% 80%, rgba(146,133,184,0.32) 0%, transparent 45%), radial-gradient(circle at 12% 75%, rgba(71,145,156,0.28) 0%, transparent 40%), radial-gradient(circle at 90% 70%, rgba(221,185,38,0.22) 0%, transparent 38%); filter: blur(8px); } /* ============ TOP BAR ============ */ .bar{position:sticky;top:0;z-index:30;background:rgba(246,239,228,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)} .bar-inner{max-width:1200px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .brand{display:inline-flex;align-items:baseline;line-height:1;text-decoration:none;color:var(--ink)} .brand .a{font-family:'Italianno',cursive;font-size:54px;line-height:0.7;color:var(--ink);font-weight:400;display:inline-block;transform:translateY(7px);letter-spacing:0;margin-right:10px} .brand .rmoni{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:26px;letter-spacing:0.02em;color:var(--ink);display:inline-block;margin-left:0} /* „me" z oryginalnego logo (Klaudia, 08.08.2026) jako maska SVG — koloruje się kolorem wymiaru */ .brand .me{display:inline-block;height:20px;aspect-ratio:786/397;margin-left:7px;align-self:flex-end;transform:translateY(-1px); font-size:0;line-height:0;color:transparent;overflow:hidden; background-color:var(--accent);transition:background-color .4s; -webkit-mask:url(assets/logo-me.svg) no-repeat left bottom/contain; mask:url(assets/logo-me.svg) no-repeat left bottom/contain} /* Logo „Armoni" jako maska SVG — przebarwia się do koloru kontekstu; „me" zostaje kolorowym tekstem */ .brand .armoni-logo,.foot-brand .armoni-logo{display:inline-block;height:32px;aspect-ratio:2155/718;align-self:flex-end; -webkit-mask:url(assets/logo-armoni.svg) no-repeat left bottom/contain; mask:url(assets/logo-armoni.svg) no-repeat left bottom/contain} .brand .armoni-logo{background-color:var(--ink)} .foot-brand .armoni-logo{background-color:#f4ece1} .bar-nav{display:flex;align-items:center;gap:24px;font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(28,37,48,0.55);flex-wrap:wrap} .bar-nav a{color:inherit;text-decoration:none;transition:color .2s} .bar-nav a:hover{color:var(--accent)} .bar-nav .dim-list{display:flex;gap:18px} .bar-nav .dim-list .ext-group{position:relative;padding-right:18px} .bar-nav .dim-list .ext-group::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(28,37,48,0.18)} .bar-nav .dim-label{font-size:9px;letter-spacing:0.32em;color:rgba(28,37,48,0.4);margin-right:6px} .back{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(28,37,48,0.6);text-decoration:none;transition:color .2s} .back:hover{color:var(--accent)} .back .arr{display:inline-block;width:18px;height:1px;background:currentColor;position:relative} .back .arr::before{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-left:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(-45deg)} /* ============ HERO ============ */ .hero{padding:96px 32px 64px;text-align:center;position:relative;overflow:hidden} .hero::before{content:"";position:absolute;left:50%;top:60px;transform:translateX(-50%);width:800px;max-width:96vw;height:700px;border-radius:50%;background:radial-gradient(ellipse at center, var(--accent) 0%, transparent 60%);opacity:0.18;pointer-events:none;filter:blur(50px)} .hero-inner{max-width:880px;margin:0 auto;position:relative;z-index:1} .hero-num{font-family:'Montserrat',sans-serif;font-size:14px;letter-spacing:0.42em;text-transform:uppercase;color:var(--accent);margin-bottom:28px;font-weight:500} .hero-num .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin:0 14px;vertical-align:middle;transform:translateY(-2px)} .hero h1{font-family:'Playfair Display',serif;font-weight:500;font-size:96px;line-height:0.96;letter-spacing:-0.02em;margin-bottom:36px} .hero h1 em{color:var(--accent);font-style:italic;font-weight:400} .hero .hook{font-family:'Playfair Display',serif;font-style:italic;font-size:28px;line-height:1.4;color:rgba(28,37,48,0.78);max-width:680px;margin:0 auto;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} /* ============ INTRO ============ */ .intro-section{max-width:1200px;margin:0 auto;padding:32px 64px 48px} .intro{font-family:'Inter',sans-serif;font-size:17px;line-height:1.75;color:rgba(28,37,48,0.85);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .intro-photo img{width:100%;max-height:280px;border-radius:4px;object-fit:cover;display:block} .intro p:first-child::first-letter{font-size:64px;float:left;line-height:0.9;padding:6px 10px 0 0;color:var(--accent);font-weight:500} .intro-photo{width:100%;border-radius:6px;overflow:hidden} .intro-owl{margin-top:40px} /* Photo placeholder — used wherever real photos will drop in */ .photo-ph{width:100%;height:100%;min-height:260px;background:rgba(74,107,80,0.08);border:1.5px dashed rgba(74,107,80,0.28);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(74,107,80,0.45);text-align:center;padding:24px} /* Finding + Stats side by side */ .finding-stats-row{display:grid;grid-template-columns:4fr 2fr 2fr;gap:24px;margin:32px 0;align-items:stretch} .finding-stats-row .finding{margin:0} .stats-col{display:contents} .stats-col .stats{display:contents} .stats-col .stats .stat{margin:0} @media(max-width:768px){.finding-stats-row{display:flex;flex-direction:column;gap:24px}.stats-col{display:block}.stats-col .stats{display:flex;flex-direction:column;gap:16px}.intro{grid-template-columns:1fr}.intro-section{padding:24px 24px 36px}} /* ============ SECTIONS ============ */ section{padding:64px 32px} .section-inner{max-width:1100px;margin:0 auto;padding:0 32px} .section-tag{font-size:10px;letter-spacing:0.42em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;font-weight:500} .section h2{font-family:'Playfair Display',serif;font-weight:500;font-size:42px;line-height:1.1;letter-spacing:-0.01em;margin-bottom:32px;text-align:center} .section h2 em{color:var(--accent);font-style:italic;font-weight:400} .section p{font-size:17px;line-height:1.75;margin-bottom:18px;color:rgba(28,37,48,0.85);text-align:center} .section h3{font-family:'Playfair Display',serif;font-size:16px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(28,37,48,0.65);margin:36px 0 14px;font-weight:500} .bg-paper-2{background:var(--paper-2)} /* Image placeholder slots */ .image-slot{background:rgba(255,255,255,0.55);border:1px dashed rgba(28,37,48,0.25);border-radius:2px;display:flex;align-items:center;justify-content:center;min-height:340px;color:rgba(28,37,48,0.45);font-family:'Playfair Display',serif;font-style:italic;font-size:15px;text-align:center;padding:20px;margin:24px 0} .image-slot::before{content:"+ illustration · "} .image-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0} .image-pair .image-slot{margin:0;min-height:280px} /* Stat cards w/ source links */ .stats{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0} .stat{background:rgba(255,255,255,0.5);border:1px solid var(--rule);padding:28px 24px;border-radius:2px;display:flex;flex-direction:column} .stat .n{font-family:'Playfair Display',serif;font-size:54px;font-weight:500;color:var(--accent);line-height:1;margin-bottom:10px} .stat .lbl{font-family:'Inter',sans-serif;font-style:italic;font-size:16px;line-height:1.4;color:rgba(28,37,48,0.75);margin-bottom:14px;flex:1} .stat .src{margin-top:auto} .stat .src{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(28,37,48,0.5)} .stat .src a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(0,0,0,0.0);transition:border-color .2s} .stat .src a:hover{border-bottom-color:var(--accent)} /* Pull quote */ .pull{margin:48px auto;padding:48px 64px;max-width:720px;text-align:center;font-family:'Playfair Display',serif;font-size:28px;line-height:1.5;font-style:italic;color:rgba(28,37,48,0.85);position:relative;background:rgba(220,166,134,0.07);border-top:1px solid rgba(220,166,134,0.35);border-bottom:1px solid rgba(220,166,134,0.35)} .pull::before{content:'\201C';position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-family:'Playfair Display',serif;font-size:96px;line-height:1;color:var(--accent);opacity:0.35;font-style:normal} .pull::after{content:'';display:block;width:36px;height:1px;background:var(--accent);margin:20px auto 0;opacity:0.5} /* Key finding */ .finding{background:rgba(255,255,255,0.6);border:1px solid var(--rule);padding:32px;margin:32px 0;border-radius:2px} .finding .head{font-size:10px;letter-spacing:0.36em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:500} .finding p{font-family:'Inter',sans-serif;font-size:18px;line-height:1.55;color:rgba(28,37,48,0.85);max-width:none;margin:0} .finding p strong{color:var(--accent);font-weight:600;font-style:normal} .finding p em{font-style:italic;color:rgba(28,37,48,0.95)} /* Exercises — redesigned with warm background and decorative numbers */ section.section:has(.exercises){background:linear-gradient(160deg,#f0e8d8 0%,#e8ddc8 60%,#ede3d0 100%)} .exercises{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px} .ex{background:rgba(255,252,246,0.82);border:none;padding:40px 32px 36px;border-radius:8px;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 2px 18px rgba(60,40,20,0.07)} .ex::before{content:attr(data-num);position:absolute;top:6px;right:18px;font-family:'Playfair Display',serif;font-size:72px;font-weight:600;color:var(--accent);opacity:0.18;line-height:1;pointer-events:none;user-select:none} .ex .ex-head{display:flex;justify-content:flex-start;align-items:center;margin-bottom:16px;gap:12px} .ex .ex-num{display:none} .ex .ex-time{font-family:'Playfair Display',serif;font-style:italic;font-size:14px;color:rgba(28,37,48,0.5);background:rgba(74,107,80,0.08);padding:4px 12px;border-radius:20px;white-space:nowrap} .ex h4{font-family:'Playfair Display',serif;font-size:26px;font-weight:500;line-height:1.2;margin-bottom:18px;color:var(--ink);border-bottom:1px solid rgba(74,107,80,0.18);padding-bottom:16px} .ex p{font-size:15px;line-height:1.7;color:rgba(28,37,48,0.78);margin:0} .ex ol{padding-left:0;list-style:none;font-size:15px;line-height:1.65;color:rgba(28,37,48,0.8)} .ex ol li{margin-bottom:12px;padding-left:28px;position:relative} .ex ol li::before{content:counter(ex-step);counter-increment:ex-step;position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:500;letter-spacing:0} .ex ol{counter-reset:ex-step} .sources{font-size:11px;letter-spacing:0.04em;color:rgba(28,37,48,0.5);font-style:italic;margin-top:32px;line-height:1.7;max-width:700px} .sources a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(0,0,0,0.0)} .sources a:hover{border-bottom-color:var(--accent)} /* ============ PAIRS WITH ============ */ .pairs{padding:80px 32px;background:var(--paper-2)} .pairs-inner{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center} .pairs-tag{font-size:10px;letter-spacing:0.42em;text-transform:uppercase;color:rgba(28,37,48,0.5);margin-bottom:14px} .pairs h2{font-family:'Playfair Display',serif;font-size:36px;font-weight:500;line-height:1.15;margin-bottom:20px} .pairs h2 em{color:var(--accent);font-style:italic;font-weight:400} .pairs p{font-family:'Inter',sans-serif;font-size:19px;font-style:italic;line-height:1.5;color:rgba(28,37,48,0.78);margin-bottom:24px} .pair-card{background:#fff;border:1px solid var(--rule);padding:36px 32px;border-radius:2px;text-decoration:none;color:inherit;transition:transform .25s, box-shadow .25s;display:block} .pair-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(28,37,48,0.08)} .pair-card .pc-num{font-size:11px;letter-spacing:0.36em;text-transform:uppercase;color:var(--pair-color, var(--accent));margin-bottom:14px} .pair-card .pc-title{font-family:'Playfair Display',serif;font-size:34px;font-weight:500;line-height:1.1;margin-bottom:12px} .pair-card .pc-title em{color:var(--pair-color, var(--accent));font-style:italic;font-weight:400} .pair-card .pc-blurb{font-family:'Inter',sans-serif;font-style:italic;font-size:17px;line-height:1.5;color:rgba(28,37,48,0.7);margin-bottom:20px} .pair-card .pc-arr{font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--pair-color, var(--accent))} /* ============ QUIZ TEASER ============ */ .quiz{padding:72px 32px;position:relative;background: radial-gradient(ellipse at 14% 22%, rgba(74,107,80,0.13) 0%, transparent 42%), radial-gradient(ellipse at 84% 18%, rgba(183,70,69,0.11) 0%, transparent 44%), radial-gradient(ellipse at 90% 74%, rgba(146,133,184,0.13) 0%, transparent 46%), radial-gradient(ellipse at 10% 80%, rgba(71,145,156,0.11) 0%, transparent 44%), radial-gradient(ellipse at 50% 55%, rgba(221,185,38,0.07) 0%, transparent 58%), var(--paper-2); border-top:1px solid color-mix(in srgb, var(--accent) 18%, transparent)} .quiz-inner{max-width:1100px;margin:0 auto;text-align:center} .quiz .q-tag{font-size:10px;letter-spacing:0.42em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;font-weight:500;opacity:0.75} .quiz h2{font-family:'Playfair Display',serif;font-size:40px;font-weight:400;line-height:1.15;margin-bottom:14px;color:var(--ink);letter-spacing:-0.01em} .quiz h2 em{color:var(--accent);font-style:italic} .quiz > .quiz-inner > p{font-family:'Inter',sans-serif;font-style:italic;font-size:19px;line-height:1.5;color:rgba(28,37,48,0.65);max-width:520px;margin:0 auto 40px} /* 8 dimension icons — grid gives perfectly equal columns */ .quiz-dims{display:grid;grid-template-columns:repeat(8,1fr);gap:0;margin-bottom:44px;align-items:start;max-width:800px;margin-left:auto;margin-right:auto} .quiz-dims .dim-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;transition:transform .25s;padding:0 4px} .quiz-dims .dim-item:hover{transform:translateY(-4px)} .quiz-dims .dim-item img{width:56px;height:56px;border-radius:50%;object-fit:cover;opacity:0.45;filter:grayscale(40%);transition:all .25s;box-shadow:0 2px 8px rgba(28,37,48,0.10)} .quiz-dims .dim-item.active img{width:56px;height:56px;opacity:1;filter:none;box-shadow:0 4px 20px color-mix(in srgb,var(--accent) 40%,transparent)} .quiz-dims .dim-item span{font-size:9px;letter-spacing:0.28em;text-transform:uppercase;color:rgba(28,37,48,0.4);font-family:'Montserrat',sans-serif;text-align:center;line-height:1.3} .quiz-dims .dim-item.active span{color:var(--accent);font-weight:500;opacity:1} /* form */ .quiz-form{display:flex;gap:10px;justify-content:center;max-width:480px;margin:0 auto;flex-wrap:wrap} .quiz-form input{flex:1;min-width:220px;padding:14px 18px;border:1px solid var(--rule);background:#fff;font-family:'Playfair Display',serif;font-style:italic;font-size:16px;color:var(--ink);border-radius:4px} .quiz-form input:focus{outline:none;border-color:var(--accent)} .quiz-form button{padding:14px 30px;border:none;background:var(--accent);color:#fff;font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;cursor:pointer;border-radius:4px;transition:opacity .2s} .quiz-form button:hover{opacity:0.85} /* rozbudowany formularz „join us" (about us): pole roli + krótka wiadomość */ .quiz-form.join-form select,.quiz-form.join-form textarea{flex:1 0 100%;padding:14px 18px;border:1px solid var(--rule);background:#fff;font-family:'Playfair Display',serif;font-style:italic;font-size:16px;color:var(--ink);border-radius:4px} .quiz-form.join-form select:focus,.quiz-form.join-form textarea:focus{outline:none;border-color:var(--accent)} .quiz-form.join-form select:invalid{color:rgba(28,37,48,0.45)} .quiz-form.join-form textarea{resize:vertical;min-height:88px;line-height:1.5} .quiz .q-note{font-size:11px;letter-spacing:0.04em;color:rgba(28,37,48,0.4);margin-top:18px} .quiz-btn{display:inline-block;padding:16px 48px;background:var(--accent);color:#fff;font-family:"Montserrat",sans-serif;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;text-decoration:none;border-radius:4px;transition:opacity .2s;margin:0 auto} .quiz-btn:hover{opacity:0.85} /* ============ PRODUCTS ============ */ .products{padding:96px 32px} .products-inner{max-width:1200px;margin:0 auto} .products-head{text-align:center;margin-bottom:60px} .products-head .tag{font-size:11px;letter-spacing:0.42em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;font-weight:500} .products-head h2{font-family:'Playfair Display',serif;font-size:46px;font-weight:500;line-height:1.1;margin-bottom:18px;letter-spacing:-0.01em} .products-head h2 em{color:var(--accent);font-style:italic;font-weight:400} .products-head p{font-family:'Inter',sans-serif;font-style:italic;font-size:20px;line-height:1.5;color:rgba(28,37,48,0.7);max-width:560px;margin:0 auto} .product-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;align-items:stretch} .product-grid.three-up{grid-template-columns:repeat(3,1fr)} @media(max-width:760px){.product-grid.three-up{grid-template-columns:1fr}} .product{background:#fff;border:1px solid var(--rule);padding:36px 30px;display:flex;flex-direction:column;border-radius:2px;transition:transform .25s, box-shadow .25s;position:relative;overflow:hidden;text-decoration:none;color:var(--ink)} .product:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,37,48,0.07)} .product::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--accent)} .product .p-tag{font-size:9px;letter-spacing:0.36em;text-transform:uppercase;color:rgba(28,37,48,0.45);margin-bottom:14px;margin-top:8px} .product h3{font-family:'Playfair Display',serif;font-size:26px;font-weight:500;line-height:1.15;margin-bottom:14px;color:var(--ink);text-transform:none;letter-spacing:0;margin-top:0;min-height:2.3em} .product .p-desc{font-size:14px;line-height:1.65;color:rgba(28,37,48,0.7);margin-bottom:24px;min-height:158px} .product .p-price{font-family:'Playfair Display',serif;font-size:18px;color:var(--accent);margin-bottom:18px;font-style:italic} .product .p-cta{display:inline-block;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:6px;align-self:flex-start;transition:color .2s;cursor:pointer} .product .p-cta:hover{color:var(--accent)} /* Waitlist on product cards */ .product .p-waitlist{margin-top:14px;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(28,37,48,0.5);display:none} .product[data-state="waitlist"] .p-waitlist{display:block} .product[data-state="waitlist"] .p-cta{border-bottom-color:rgba(28,37,48,0.3);color:rgba(28,37,48,0.6)} .waitlist-row{display:flex;gap:8px;margin-top:12px;align-items:center;justify-content:center} .waitlist-row input{flex:0 1 150px;max-width:150px;padding:8px 12px;border:1px solid var(--rule);font-size:12px;font-family:'Inter',sans-serif;font-style:italic;border-radius:2px} .waitlist-row button{padding:8px 16px;background:var(--accent);color:#fff;border:none;font-size:10px;letter-spacing:0.24em;text-transform:uppercase;cursor:pointer;border-radius:2px;align-self:center;white-space:nowrap} /* ============ AFFILIATE BOOKS CAROUSEL ============ */ .affiliate{padding:80px 32px;background:var(--paper-2);border-top:1px solid var(--rule)} .affiliate-inner{max-width:1200px;margin:0 auto} .affiliate-head{text-align:center;margin-bottom:48px} .affiliate-head .tag{font-size:10px;letter-spacing:0.42em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:500} .affiliate-head h2{font-family:'Playfair Display',serif;font-size:34px;font-weight:500;line-height:1.15} .affiliate-head h2 em{color:var(--accent);font-style:italic;font-weight:400} .affiliate-head p{font-family:'Inter',sans-serif;font-style:italic;font-size:17px;color:rgba(28,37,48,0.65);margin-top:10px} .book-row{display:grid;grid-template-columns:repeat(5, 1fr);gap:18px} .book{background:#fff;border:1px solid var(--rule);padding:18px;border-radius:2px;text-decoration:none;color:inherit;transition:transform .25s} .book:hover{transform:translateY(-3px)} .book .cover{aspect-ratio:2/3;background:linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12));border-radius:2px;display:flex;align-items:center;justify-content:center;color:rgba(28,37,48,0.35);font-family:'Playfair Display',serif;font-style:italic;font-size:13px;margin-bottom:12px;text-align:center;padding:14px} /* prawdziwe okładki od Klaudii (12.08.2026) — zdjęcie zamiast szarej atrapy */ .book .cover.has-cover{padding:0;background:#efe9e0;overflow:hidden} .book .cover img{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px} .book .title{font-family:'Playfair Display',serif;font-size:15px;font-weight:500;line-height:1.25;margin-bottom:6px} .book .author{font-size:11px;color:rgba(28,37,48,0.55);font-style:italic} .book .label{font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:var(--accent);margin-top:10px} /* ============ FOOTER ============ */ footer{background:var(--ink);color:rgba(244,236,225,0.7);padding:80px 32px 48px} footer a{text-decoration:none;color:inherit} .foot-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px} .foot-brand{display:inline-flex;align-items:baseline;line-height:1;margin-bottom:18px} .foot-brand .a{font-family:'Italianno',cursive;font-size:54px;line-height:0.7;color:#f4ece1;font-weight:400;display:inline-block;transform:translateY(7px);letter-spacing:0;margin-right:10px} .foot-brand .rmoni{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:26px;color:#f4ece1;margin-left:0} .foot-brand .me{display:inline-block;height:18px;aspect-ratio:786/397;margin-left:6px;align-self:flex-end;transform:translateY(-2px); font-size:0;line-height:0;color:transparent;overflow:hidden;background-color:var(--accent); -webkit-mask:url(assets/logo-me.svg) no-repeat left bottom/contain; mask:url(assets/logo-me.svg) no-repeat left bottom/contain} .foot-inner p{font-family:'Playfair Display',serif;font-style:italic;font-size:17px;line-height:1.5;color:rgba(244,236,225,0.6);max-width:340px} .foot-inner h5{font-size:10px;letter-spacing:0.36em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;font-weight:500} .foot-inner h5.subhead{margin-top:20px} .foot-inner ul{list-style:none} .foot-inner li{font-size:13px;letter-spacing:0.04em;margin-bottom:10px;color:rgba(244,236,225,0.6)} .foot-inner li a{color:inherit;transition:color .2s} .foot-inner li a:hover{color:var(--accent)} .foot-sources{max-width:1200px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(244,236,225,0.1)} .foot-sources details summary{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(244,236,225,0.4);cursor:pointer;user-select:none} .foot-sources details p{margin-top:12px;font-size:11px;line-height:1.7;color:rgba(244,236,225,0.35)} .foot-sources details a{color:rgba(244,236,225,0.45);text-decoration:none;border-bottom:1px solid rgba(244,236,225,0.2)} /* Research sources mini-section — below affiliate/books */ .dim-sources{background:rgba(28,37,48,0.025);border-top:1px solid rgba(28,37,48,0.07);padding:32px 0} .dim-sources-inner{max-width:1200px;margin:0 auto;padding:0 64px} .dim-sources-label{font-family:'Montserrat',sans-serif;font-size:9px;letter-spacing:0.36em;text-transform:uppercase;color:rgba(28,37,48,0.35);margin-bottom:14px} .dim-sources-inner p{font-family:'Montserrat',sans-serif;font-size:12px;line-height:2;color:rgba(28,37,48,0.45);margin:0} .dim-sources-inner a{color:rgba(28,37,48,0.45);text-decoration:none;border-bottom:1px solid rgba(28,37,48,0.15)} .dim-sources-inner a:hover{color:rgba(28,37,48,0.7)} @media(max-width:768px){.dim-sources-inner{padding:0 24px}.dim-sources-inner p{font-size:11px;line-height:1.9}} .foot-bottom{max-width:1200px;margin:24px auto 0;padding-top:24px;border-top:1px solid rgba(244,236,225,0.1);display:flex;justify-content:space-between;font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(244,236,225,0.4);flex-wrap:wrap;gap:8px} /* Coming-soon states */ .placeholder-note{max-width:680px;margin:48px auto;padding:32px;background:rgba(255,255,255,0.5);border:1px dashed var(--accent);font-family:'Playfair Display',serif;font-style:italic;font-size:17px;line-height:1.6;color:rgba(28,37,48,0.65);text-align:center} /* Feature callout — for highlighting the single most important sentence on a page */ .feature-callout{padding:80px 32px;background:linear-gradient(135deg, var(--paper-2) 0%, rgba(220,166,134,0.18) 100%);position:relative;overflow:hidden} .feature-callout::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle, rgba(220,166,134,0.25) 0%, transparent 60%);pointer-events:none} .callout-inner{max-width:780px;margin:0 auto;display:grid;grid-template-columns:60px 1fr;gap:32px;align-items:center;position:relative;z-index:1} .callout-mark{width:60px;height:60px;color:var(--accent);flex-shrink:0} .callout-inner p{font-family:'Playfair Display',serif;font-style:italic;font-size:32px;line-height:1.35;color:var(--ink);margin:0;letter-spacing:-0.005em} .callout-inner p em{font-style:italic;color:var(--accent);font-weight:500} @media (max-width:760px){ .feature-callout{padding:48px 24px} .callout-inner{grid-template-columns:1fr;text-align:center;gap:18px} .callout-mark{margin:0 auto} .callout-inner p{font-size:22px} } /* === OWL VISIT — guide that appears once per dimension page === */ .owl-visit{display:grid;grid-template-columns:140px 1fr;gap:32px;align-items:center;padding:32px;background:rgba(255,255,255,0.5);border-left:3px solid var(--accent);border-radius:2px} .owl-svg{width:140px;height:140px;object-fit:contain;mix-blend-mode:multiply} .owl-quote .owl-tag{font-size:10px;letter-spacing:0.36em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;font-weight:500} .owl-quote p{font-family:'Playfair Display',serif;font-style:italic;font-size:21px;line-height:1.4;color:rgba(28,37,48,0.85);margin:0} .owl-quote .owl-attrib{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(28,37,48,0.5);margin-top:14px} .owl-quote .owl-cta{display:inline-flex;margin-top:16px;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:4px;align-items:center;gap:8px} /* === COMPARISON PAIR (messy vs ordered) === */ .comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:40px 0} .comp-card{display:flex;flex-direction:column} .comp-img{aspect-ratio:4/3;background:rgba(255,255,255,0.5);border:1px dashed rgba(28,37,48,0.25);border-radius:4px;position:relative;overflow:hidden} .comp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:4px} .comp-card[data-state="messy"] .comp-img{background:linear-gradient(135deg, rgba(108,57,30,0.12), rgba(183,70,69,0.12))} .comp-card[data-state="ordered"] .comp-img{background:linear-gradient(135deg, rgba(74,107,80,0.12), rgba(135,182,181,0.12))} .comp-question{margin-top:14px;font-family:'Inter',sans-serif;font-style:italic;font-size:17px;color:rgba(28,37,48,0.78);text-align:center} /* === STATS WITH ICONS === */ .stat-icon{display:flex;align-items:center;justify-content:flex-start;margin-bottom:14px;color:var(--accent)} .stat-icon svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:1.4} /* === LEVERS TABLE === */ .levers-table{margin:40px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);max-width:780px} .lever-row{display:grid;grid-template-columns:140px 1fr 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)} .lever-row:last-child{border-bottom:none} .lever-row.header{font-size:10px;letter-spacing:0.36em;text-transform:uppercase;color:rgba(28,37,48,0.5);font-weight:500;padding:14px 0} .lever-name{font-family:'Playfair Display',serif;font-size:24px;font-weight:500;color:var(--accent);font-style:italic} .lever-desc, .lever-impact{font-family:'Inter',sans-serif;font-size:16px;line-height:1.5;color:rgba(28,37,48,0.8)} .lever-impact{color:rgba(28,37,48,0.65);font-style:italic} /* === VIDEO BACKGROUND === */ .bg-video-wrap{position:relative;overflow:hidden} .bg-video-wrap > video.bg-video, .bg-video-wrap > .bg-video-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .bg-video-wrap > .bg-video-fallback{background:linear-gradient(135deg, var(--accent) 0%, transparent 100%);opacity:0.35;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.7);font-family:'Playfair Display',serif;font-style:italic;font-size:15px;text-align:center;padding:24px} /* Brak plików wideo — chowamy