/* ========================================================= PLANTAS — folha de estilo dedicada Usada por: plantas.php, planta1.php, planta2.php, planta3.php (carregar SEMPRE depois de /style.css no ) ========================================================= */ :root{ --plt-bg: #0d130f; --plt-bg-alt: #10170f; --plt-panel: #141d17; --plt-panel-hover: #1a251d; --plt-border: #2a3830; --plt-border-soft: #1f2b23; --plt-gold: #c9a24b; --plt-gold-soft: rgba(201,162,75,0.16); --plt-sage: #8fae7c; --plt-sage-soft: rgba(143,174,124,0.14); --plt-rust: #c9834b; --plt-text: #eae6d8; --plt-text-soft: #c3cdbc; --plt-text-muted: #93a396; --plt-text-dim: #6c7a70; --plt-radius: 4px; --plt-serif: 'Fraunces', Georgia, serif; --plt-sans: 'Inter', -apple-system, Segoe UI, sans-serif; --plt-mono: 'IBM Plex Mono', 'Courier New', monospace; } .plt-page{ background: var(--plt-bg); color: var(--plt-text); font-family: var(--plt-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* O tema global do site (style.css) desenha uma linha de destaque por baixo de cada item do submenu "All Projects" / "Gallery". Aqui, dentro das páginas de plantas, removemos essa linha nos itens do dropdown (mantemos o sublinhado do item "active" no menu principal, que é intencional). */ .plt-page .classynav ul.dropdown > li, .plt-page .classynav ul.dropdown > li > a{ border-bottom: none !important; box-shadow: none !important; } .plt-page .classynav ul.dropdown > li::after, .plt-page .classynav ul.dropdown > li > a::after, .plt-page .classynav ul.dropdown > li::before, .plt-page .classynav ul.dropdown > li > a::before{ display: none !important; content: none !important; } .plt-page a{ color: inherit; text-decoration: none; } .plt-page ::selection{ background: var(--plt-gold-soft); color: var(--plt-text); } .plt-container{ max-width: 1180px; margin: 0 auto; padding: 0 28px; } /* ---------- Etiqueta de viveiro (elemento assinatura) ---------- */ .plt-tag{ position: absolute; top: 18px; left: 18px; z-index: 3; background: var(--plt-bg); border: 1px solid var(--plt-gold); color: var(--plt-gold); font-family: var(--plt-mono); font-size: 11px; letter-spacing: 0.08em; padding: 5px 10px 5px 8px; transform: rotate(-4deg); box-shadow: 0 4px 12px rgba(0,0,0,0.45); } .plt-tag::before{ content:""; position:absolute; left:-7px; top: 50%; width:7px; height:1px; background: var(--plt-gold); transform: translateY(-50%) rotate(20deg); box-shadow: -14px -3px 0 -6px var(--plt-gold), -9px 5px 0 -6px var(--plt-gold); } /* ---------- HERO (plantas.php) ---------- */ .plt-hero{ position: relative; padding: 96px 0 64px; overflow: hidden; border-bottom: 1px solid var(--plt-border-soft); background: radial-gradient(ellipse at 82% 10%, rgba(143,174,124,0.08), transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(201,162,75,0.06), transparent 50%), var(--plt-bg); } .plt-hero-eyebrow{ font-family: var(--plt-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--plt-sage); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; } .plt-hero-eyebrow::before{ content:""; width: 24px; height: 1px; background: var(--plt-sage); } .plt-hero h1{ font-family: var(--plt-serif); font-weight: 500; font-style: italic; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; margin: 0 0 22px; max-width: 15ch; color: var(--plt-text); } .plt-hero p{ max-width: 54ch; color: var(--plt-text-muted); font-size: 1.05rem; } .plt-hero-stats{ display:flex; gap: 40px; margin-top: 44px; flex-wrap: wrap; } .plt-hero-stat b{ display:block; font-family: var(--plt-serif); font-size: 1.9rem; color: var(--plt-gold); font-style: italic; } .plt-hero-stat span{ font-family: var(--plt-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plt-text-dim); } /* decorative botanical line-art, pure SVG/CSS, no external asset */ .plt-hero-art{ position:absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 480px; max-width: 42vw; opacity: 0.5; pointer-events:none; } .plt-hero-art svg{ width:100%; height:auto; } /* ---------- Filtros ---------- */ .plt-filters{ display:flex; gap: 10px; flex-wrap: wrap; padding: 30px 0 10px; } .plt-filter-btn{ font-family: var(--plt-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; background: transparent; border: 1px solid var(--plt-border); color: var(--plt-text-muted); padding: 9px 16px; border-radius: var(--plt-radius); cursor: pointer; transition: all .2s ease; } .plt-filter-btn:hover{ border-color: var(--plt-sage); color: var(--plt-text); } .plt-filter-btn.is-active{ border-color: var(--plt-gold); color: var(--plt-gold); background: var(--plt-gold-soft); } /* ---------- Grelha de espécimes ---------- */ .plt-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 30px 0 100px; } @media (max-width: 900px){ .plt-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px){ .plt-grid{ grid-template-columns: 1fr; } } .plt-card{ position: relative; background: var(--plt-panel); border: 1px solid var(--plt-border-soft); border-radius: var(--plt-radius); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; display:block; } .plt-card:hover{ transform: translateY(-4px); border-color: var(--plt-gold); box-shadow: 0 18px 40px rgba(0,0,0,0.4); } .plt-card-photo{ position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--plt-bg-alt); } .plt-card-photo img{ width:100%; height:100%; object-fit: cover; transition: transform .5s ease; } .plt-card:hover .plt-card-photo img{ transform: scale(1.05); } .plt-card-body{ padding: 18px 20px 22px; } .plt-card-sci{ font-family: var(--plt-serif); font-style: italic; color: var(--plt-text-dim); font-size: 12.5px; margin: 0 0 4px; } .plt-card-name{ font-family: var(--plt-serif); font-size: 1.35rem; margin: 0 0 12px; color: var(--plt-text); } .plt-card-meta{ display:flex; gap: 16px; font-family: var(--plt-mono); font-size: 11px; color: var(--plt-text-muted); } .plt-card-meta span{ display:flex; align-items:center; gap:6px; } .plt-card-meta svg{ width:13px; height:13px; stroke: var(--plt-sage); flex-shrink:0; } .plt-card-status{ position:absolute; top: 16px; right: 16px; z-index: 2; font-family: var(--plt-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; background: rgba(13,19,15,0.85); border: 1px solid var(--plt-border); color: var(--plt-text-muted); } .plt-card-status.ok{ color: var(--plt-sage); border-color: var(--plt-sage); } .plt-card-status.watch{ color: var(--plt-gold); border-color: var(--plt-gold); } /* ---------- Secção intro extra (nota pessoal) ---------- */ .plt-intro-note{ border-top: 1px solid var(--plt-border-soft); border-bottom: 1px solid var(--plt-border-soft); padding: 40px 0; display:grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; } @media (max-width: 700px){ .plt-intro-note{ grid-template-columns: 1fr; } } .plt-intro-note h2{ font-family: var(--plt-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--plt-sage); margin: 0; } .plt-intro-note p{ color: var(--plt-text-muted); margin: 0; max-width: 62ch; } /* ---------- PÁGINA DE ESPÉCIME (planta1.php etc.) ---------- */ .plt-breadcrumb{ padding: 64px 0 0; font-family: var(--plt-mono); font-size: 11.5px; color: var(--plt-text-dim); letter-spacing: .04em; } .plt-breadcrumb a:hover{ color: var(--plt-sage); } .plt-breadcrumb .sep{ margin: 0 8px; opacity:.5; } .plt-breadcrumb .current{ color: var(--plt-text-muted); } .plt-detail-header{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 34px 0 60px; align-items: center; border-bottom: 1px solid var(--plt-border-soft); } @media (max-width: 860px){ .plt-detail-header{ grid-template-columns: 1fr; gap: 32px; } } .plt-gallery{ position: relative; } .plt-gallery-main{ position: relative; aspect-ratio: 4/5; border-radius: var(--plt-radius); overflow: hidden; background: var(--plt-panel); border: 1px solid var(--plt-border-soft); } .plt-gallery-main img{ width:100%; height:100%; object-fit: cover; } .plt-gallery-thumbs{ display:flex; gap: 10px; margin-top: 12px; } .plt-gallery-thumbs img{ width: 64px; height: 64px; object-fit: cover; border-radius: var(--plt-radius); border: 1px solid var(--plt-border); cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s; } .plt-gallery-thumbs img:hover, .plt-gallery-thumbs img.is-active{ opacity: 1; border-color: var(--plt-gold); } .plt-detail-info .plt-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 18px; } .plt-badge{ font-family: var(--plt-mono); font-size: 10.5px; letter-spacing:.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--plt-border); color: var(--plt-text-muted); } .plt-badge.gold{ border-color: var(--plt-gold); color: var(--plt-gold); } .plt-badge.sage{ border-color: var(--plt-sage); color: var(--plt-sage); } .plt-detail-info .plt-sci{ font-family: var(--plt-serif); font-style: italic; color: var(--plt-text-dim); font-size: 15px; margin: 0 0 6px; } .plt-detail-info h1{ font-family: var(--plt-serif); font-size: clamp(2.1rem, 4vw, 3rem); margin: 0 0 20px; } .plt-detail-info > p{ color: var(--plt-text-muted); max-width: 50ch; } /* stats "passaporte" — layout em bloco, preparado para valores curtos OU frases longas */ .plt-stats{ margin-top: 28px; border-top: 1px solid var(--plt-border-soft); } .plt-stat-row{ padding: 18px 2px; border-bottom: 1px solid var(--plt-border-soft); } .plt-stat-row .k{ display:flex; align-items:center; gap:9px; font-family: var(--plt-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plt-sage); margin-bottom: 8px; } .plt-stat-row .k svg{ width:15px; height:15px; stroke: var(--plt-sage); flex-shrink:0; } .plt-stat-row .v{ display: block; color: var(--plt-text-muted); font-size: 0.95rem; line-height: 1.7; max-width: 60ch; } /* ---------- Secção descrição ---------- */ .plt-section{ padding: 60px 0; } .plt-section-head{ display:flex; align-items: baseline; gap: 18px; margin-bottom: 30px; } .plt-section-head .num{ font-family: var(--plt-mono); color: var(--plt-text-dim); font-size: 12px; } .plt-section-head h2{ font-family: var(--plt-serif); font-style: italic; font-size: 1.7rem; margin: 0; color: var(--plt-text); } .plt-section-head::after{ content:""; flex:1; height:1px; background: var(--plt-border-soft); } .plt-prose{ color: var(--plt-text-muted); max-width: 74ch; font-size: 1rem; } .plt-prose p{ margin: 0 0 16px; line-height: 1.75; } .plt-prose h3{ font-family: var(--plt-sans); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.01em; color: var(--plt-text-soft); margin: 36px 0 12px; } .plt-prose h3:first-child{ margin-top: 0; } /* ---------- Diário de problemas — timeline ---------- */ .plt-timeline{ position: relative; padding-left: 28px; border-left: 1px solid var(--plt-border); } .plt-entry{ position: relative; padding-bottom: 40px; } .plt-entry:last-child{ padding-bottom: 0; } .plt-entry::before{ content:""; position:absolute; left: -33px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--plt-bg); border: 2px solid var(--plt-gold); } .plt-entry-date{ font-family: var(--plt-mono); font-size: 11px; letter-spacing: .06em; color: var(--plt-text-dim); text-transform: uppercase; margin-bottom: 6px; } .plt-entry h3{ font-family: var(--plt-serif); font-size: 1.2rem; margin: 0 0 8px; color: var(--plt-text); } .plt-entry p{ color: var(--plt-text-muted); max-width: 68ch; margin: 0 0 10px; } .plt-entry-status{ display:inline-block; font-family: var(--plt-mono); font-size: 10px; letter-spacing:.05em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--plt-border); color: var(--plt-text-muted); } .plt-entry-status.resolvido{ color: var(--plt-sage); border-color: var(--plt-sage); } .plt-entry-status.observacao{ color: var(--plt-gold); border-color: var(--plt-gold); } .plt-entry-status.curso{ color: var(--plt-rust); border-color: var(--plt-rust); } /* ---------- Navegação entre espécimes ---------- */ .plt-pager{ display:flex; justify-content: space-between; gap: 20px; padding: 50px 0 100px; border-top: 1px solid var(--plt-border-soft); } .plt-pager a{ flex:1; padding: 22px 24px; border: 1px solid var(--plt-border-soft); border-radius: var(--plt-radius); transition: border-color .2s, background .2s; } .plt-pager a:hover{ border-color: var(--plt-gold); background: var(--plt-panel); } .plt-pager .dir{ display:block; font-family: var(--plt-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--plt-text-dim); margin-bottom: 6px; } .plt-pager .name{ font-family: var(--plt-serif); font-style: italic; font-size: 1.1rem; } .plt-pager .next{ text-align: right; }