diff --git a/wp-content/plugins/tdf-progress-bar/css/progress.css b/wp-content/plugins/tdf-progress-bar/css/progress.css index 8a1c08f9..3d14685c 100644 --- a/wp-content/plugins/tdf-progress-bar/css/progress.css +++ b/wp-content/plugins/tdf-progress-bar/css/progress.css @@ -1,19 +1,22 @@ +/* Reading progress indicator: fixed thin bar at top of viewport showing read progress */ #tdf-reading-progress { - position: fixed; - top: 0; - left: 0; - width: 0; - height: 4px; - z-index: 100000; - transition: width 0.08s linear; + position: fixed; /* fixed to viewport */ + top: 0; /* sits at very top unless admin bar present */ + left: 0; /* starts at left edge */ + width: 0; /* updated via JS to indicate progress */ + height: 4px; /* thin visible bar */ + z-index: 100000; /* ensure above most content */ + transition: width 0.08s linear; /* smooth width animation */ } .admin-bar #tdf-reading-progress { + /* shift down when WP admin bar is visible */ top: 32px; } @media screen and (max-width: 782px) { .admin-bar #tdf-reading-progress { + /* taller admin bar on small screens */ top: 46px; } } diff --git a/wp-content/themes/the-digital-front-child/acf-json/group_opinion_fields.json b/wp-content/themes/the-digital-front-child/acf-json/group_opinion_fields.json index ecfaa346..79360aee 100644 --- a/wp-content/themes/the-digital-front-child/acf-json/group_opinion_fields.json +++ b/wp-content/themes/the-digital-front-child/acf-json/group_opinion_fields.json @@ -7,14 +7,16 @@ "label": "Author Bio", "name": "author_bio", "type": "textarea", - "required": 0 + "required": 0, + "instructions": "Short author bio shown on opinion posts (keeps to ~50 words)" }, { "key": "field_pull_quote", "label": "Pull Quote", "name": "pull_quote", "type": "textarea", - "required": 0 + "required": 0, + "instructions": "Optional short pull quote used in opinion listings and cards" }, { "key": "field_related_article", @@ -22,7 +24,8 @@ "name": "related_article", "type": "relationship", "post_type": ["article"], - "required": 0 + "required": 0, + "instructions": "Select an `article` to link this opinion to for context" } ], "location": [ diff --git a/wp-content/themes/the-digital-front-child/front-page.php b/wp-content/themes/the-digital-front-child/front-page.php index 03fe6d17..542136e4 100644 --- a/wp-content/themes/the-digital-front-child/front-page.php +++ b/wp-content/themes/the-digital-front-child/front-page.php @@ -1,239 +1,281 @@ 'article', - 'posts_per_page' => 8, + 'posts_per_page' => 8, // hero consumes up to 4 (1 primary + 3 sidebar); remainder feeds the grid 'orderby' => 'date', 'order' => 'DESC', -] ); +]); $total = $all_articles->found_posts; +// found_posts is the total matching count ignoring posts_per_page — used to branch hero layout -// Also grab recent posts (standard WP posts) as supplementary content. -$recent_posts = new WP_Query( [ +// Supplementary standard WP posts displayed in the "From the Blog" section +$recent_posts = new WP_Query([ 'post_type' => 'post', 'posts_per_page' => 4, 'orderby' => 'date', 'order' => 'DESC', -] ); +]); ?>
- +
+
- - -
-

The Digital Front

-

Tech. Tutorials. Insights.

-

We're building something great. Articles are on the way.

-
- Learn About Us + + +
+

The Digital Front

+

Tech. Tutorials. Insights.

+

We're building something great. Articles are on the way.

+
+ Learn About Us + +
-
- the_post(); - ?> + the_post(); + // Advance the loop pointer to post #1 — this becomes the primary hero feature + ?> -
- - -
- - - -
- -
- Featured -

- -

- -
- - - - · min read - -
-
-
- +
+ - -
- have_posts() && $side_count < 3 ) : - $all_articles->the_post(); - $side_count++; - ?> - -
- - + + +
+ + + -
+
+ -
-
-

- +
+ + Featured +

+ +

+ + +
+ + + + + · min read + +
+
- - - -
-

The Digital Front

-

Your source for trending tech, tutorials, and digital insights.

- About Us + +
+ have_posts() && $side_count < 3) : + $all_articles->the_post(); + $side_count++; + ?> + +
+ + + + +
+ +
+
+

+ +
+ + + + + +
+

The Digital Front

+

Your source for trending tech, tutorials, and digital insights.

+ About Us +
+
-
-
- +
+ - +

All Articles

- + +
- + 'opinion', 'posts_per_page' => 4, 'orderby' => 'date', 'order' => 'DESC', - ] ); + ]); ?> - have_posts() ) : ?> -
-
-
-

Opinions

- All Opinions → -
-
- have_posts() ) : $opinions->the_post(); ?> - - -
- -
- -
-

- - -
“”
- -

- -
- - - - · + have_posts()) : ?> +
+
+
+

Opinions

+ All Opinions → + +
+
+ have_posts()) : $opinions->the_post(); ?> + + +
+ +
- -
- - Re: - -
- - +
+

+ + + +
“”
+ + +

+ + +
+ + + + + + · + + +
+ + Re: + + +
+ + + +
-
-
+ - + 'review', 'posts_per_page' => 3, 'orderby' => 'date', 'order' => 'DESC', - ] ); + ]); ?> - have_posts() ) : ?> -
-
-
-

Latest Reviews

- All Reviews → -
-
- have_posts() ) : $reviews->the_post(); - $rating = get_field( 'rating' ); - $product_name = get_field( 'product_name' ); - $product_image = get_field( 'product_image' ); - ?> - -
- - <?php echo esc_attr( $product_image['alt'] ?: $product_name ); ?> - - - -
- -
-
- - - -

- -

- -
- -
- - ★ - + have_posts()) : ?> +
+
+
+

Latest Reviews

+ All Reviews → +
+
+ have_posts()) : $reviews->the_post(); + $rating = get_field('rating'); // ACF: numeric score 1–5 + $product_name = get_field('product_name'); // ACF: name of the reviewed product + $product_image = get_field('product_image'); // ACF image array: url, sizes, alt, etc. + ?> + +
+ + <?php echo esc_attr($product_image['alt'] ?: $product_name); ?> + + + + + + +
+ +
- - -
-
- - +
+ + + +

+ +

+ + +
+ +
+ + + + ★ + + +
+ + +
+
+ + +
-
-
+ - +
@@ -241,30 +283,47 @@

Deep dives into the topics shaping the digital world.

+
- + + + + +

Mobile Devices

Reviews, comparisons, and news on the latest smartphones and tablets.

- + + + + +

Apple

iPhone, Mac, iPad, and the Apple ecosystem — updates and deep dives.

- + + + + +

Google

Pixel, Android, Search, and everything across Google's platforms.

- + + + + +

Samsung

Galaxy phones, wearables, and Samsung's latest innovations.

@@ -273,28 +332,36 @@
- - have_posts() ) : ?> -
-
-

From the Blog

-
- have_posts() ) : $recent_posts->the_post(); ?> - - -
-

- -
- → - - + + have_posts()) : ?> +
+
+

From the Blog

+
+ have_posts()) : $recent_posts->the_post(); ?> + + + +
+

+ +
+ → + + + +
-
-
+ - +
@@ -303,8 +370,10 @@

Get the latest articles, tutorials, and tech insights delivered straight to your inbox. No spam, ever.

+
+

Join our readers. Unsubscribe anytime.

@@ -313,69 +382,89 @@
- +
publish ?? 0; - $opinion_count = wp_count_posts( 'opinion' ); + // ->publish holds the count of posts with status "publish"; nullsafe fallback to 0 + + $opinion_count = wp_count_posts('opinion'); $opinions_pub = $opinion_count->publish ?? 0; - $review_count = wp_count_posts( 'review' ); + + $review_count = wp_count_posts('review'); $reviews_pub = $review_count->publish ?? 0; - $categories = get_terms( [ 'taxonomy' => 'category', 'hide_empty' => false ] ); - $cat_count = is_array( $categories ) ? count( $categories ) : 0; + + $categories = get_terms(['taxonomy' => 'category', 'hide_empty' => false]); + // hide_empty => false includes categories with no posts, giving an accurate total + $cat_count = is_array($categories) ? count($categories) : 0; + // Guard against WP_Error return (e.g. invalid taxonomy) with is_array() check + $authors = count_users(); + // count_users() returns an array with 'total_users' and per-role breakdowns $author_count = $authors['total_users'] ?? 1; + // Minimum of 1 so the stat never reads "0 Contributors" ?>
- + Articles
- + Opinions
- + Reviews
- + Topics
- + Contributors
∞ + Curiosity
- +

Explore

- + +
☆
+

Meet the Team

The people behind The Digital Front.

→ - + +
✎
+

Our Mission

What drives us to create great content.

→ - + +
◆
+

About Us

Learn more about The Digital Front.

→ @@ -387,3 +476,4 @@
+ \ No newline at end of file diff --git a/wp-content/themes/the-digital-front-child/header.php b/wp-content/themes/the-digital-front-child/header.php index 527e114e..dfa7619f 100644 --- a/wp-content/themes/the-digital-front-child/header.php +++ b/wp-content/themes/the-digital-front-child/header.php @@ -1,90 +1,100 @@ + > + - - - + + + + > - + + ?> -
-
-
- - - - - - - -
+
+
+
+ + + + + + + +
+ - + + +
+ + Welcome, display_name); ?> + Log out + + Log in + Register + +
-
- - Welcome, display_name ); ?> - Log out - - Log in - Register - +
+
- -
-
- - + - + // Close nav with Escape key and restore focus to the toggle + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && nav.classList.contains('is-open')) { + nav.classList.remove('is-open'); + btn.classList.remove('is-active'); + btn.setAttribute('aria-expanded', 'false'); + header.classList.remove('is-nav-open'); + btn.focus(); // return focus for keyboard users + } + }); + })(); + \ No newline at end of file diff --git a/wp-content/themes/the-digital-front-child/page-register.php b/wp-content/themes/the-digital-front-child/page-register.php index a4c2c213..840078f7 100644 --- a/wp-content/themes/the-digital-front-child/page-register.php +++ b/wp-content/themes/the-digital-front-child/page-register.php @@ -1,87 +1,107 @@
+
+
+

Create an Account

Join The Digital Front community

+ +

You are already logged in. Go to Home +

General. ?>

User registration is currently disabled.

- + + + + action=""> +
- + + id="user_login" - autocomplete="username" + autocomplete="username" required />
- + + id="user_email" - autocomplete="email" + autocomplete="email" required />
+

A password will be sent to your email address.

+
-
+ + +

Already have an account? Log in here @@ -93,4 +113,4 @@ class="tdf-form__input"

- + \ No newline at end of file diff --git a/wp-content/themes/the-digital-front-child/single.php b/wp-content/themes/the-digital-front-child/single.php index 4cbf0a74..b23f734f 100644 --- a/wp-content/themes/the-digital-front-child/single.php +++ b/wp-content/themes/the-digital-front-child/single.php @@ -1,268 +1,364 @@ , site header and navigation) -while ( have_posts() ) : the_post(); +while (have_posts()) : the_post(); + // Loop start: sets up global post data for template tags below -$reading_time = get_field( 'reading_time' ); -$source_url = get_field( 'source_url' ); -$video_embed = get_field( 'video_embed' ); -$post_type_obj = get_post_type_object( get_post_type() ); -$review_rating = get_field( 'rating' ); -$product_name = get_field( 'product_name' ); -$product_image = get_field( 'product_image' ); + // ACF fields and helpers used by the template + $reading_time = get_field('reading_time'); // minutes + $source_url = get_field('source_url'); // external source link + $video_embed = get_field('video_embed'); // URL or oEmbed provider link + $post_type_obj = get_post_type_object(get_post_type()); // CPT labels + $review_rating = get_field('rating'); // numeric 1-5 + $product_name = get_field('product_name'); + $product_image = get_field('product_image'); // array: url, alt, etc. + // Collect ACF/helper values used by this template (reading time, source, embed, review data). ?> -
+
+ -
+
+ - - - - + + + + + - -
-
- name !== 'post' ) : ?> - labels->singular_name ); ?> - - - - min read + +
+ + +
+ + + name !== 'post') : ?> + + labels->singular_name); ?> + + + + + + + + min read + +
+ +

+ + + + +

-
+
-

+
- -

- - + + + +
+ +
+ + + +
+
+ -
+
+ - - -
-
- -
-
- + +
+ -
+ + - -
- -
- - Author -
- -
- - -
- ' . esc_html( $video_embed ) . ''; ?> + + + +
+ ' . esc_html($video_embed) . ''; ?> + +
+ + + +
+ +
- - -
- -
+ + + + +
- - -
- -
- <?php echo esc_attr( $product_image['alt'] ?: $product_name ); ?> + + +
+ <?php echo esc_attr($product_image['alt'] ?: $product_name); ?> + +
+ + +
+ + +

+ + + +
+
+ + + + ★ + + +
+ /5 + +
+ + +
-
- -

- - -
-
- - ★ - + + + 'opinion', + 'posts_per_page' => -1, // return all matching opinions + 'meta_query' => [[ + 'key' => 'related_article', + 'value' => '"' . get_the_ID() . '"', // match serialized array entry + 'compare' => 'LIKE', + ]], + ]); + // WP_Query returns opinion posts whose "related_article" meta contains this post's ID + ?> + have_posts()) : ?> + +
+ Opinions on this article + +
+ have_posts()) : $linked_opinions->the_post(); ?> + + +
+

+ + + +

“”

+ +
+ + · + + +
+
+ → + + // Reset main query postdata after custom loop
- /5
-
-
- + + + + + +
+ Related Article - - 'opinion', - 'posts_per_page' => -1, - 'meta_query' => [ [ - 'key' => 'related_article', - 'value' => '"' . get_the_ID() . '"', - 'compare' => 'LIKE', - ] ], - ] ); - ?> - have_posts() ) : ?> -
- Opinions on this article -
- have_posts() ) : $linked_opinions->the_post(); ?> - -
-

- - -

“”

+ + + + + +
+ +
-
- - · - + +
+

+

+ +
-
- → + +
+ + + + + + +
+ Source + + ↗ + -
-
- - - - -
- Related Article - - -
- -
- -
-

-

- -
- -
+ + + +
+ + + #name); ?> + +
- - - -
- Source - - ↗ - -
- + 'ids']); + // 'fields' => 'ids' returns a flat array of integers rather than full WP_Term objects - - -
- - #name ); ?> - -
- + if (! empty($current_tags)) : + // Query posts across selected CPTs that share any of these tag IDs + $related_query = new WP_Query([ + 'post_type' => ['article', 'opinion', 'review', 'post'], // allowed content types + 'tag__in' => $current_tags, // match any of the current tags + 'post__not_in' => [get_the_ID()], // exclude the current post + 'posts_per_page' => 3, // limit number of suggestions + 'orderby' => 'date', + 'order' => 'DESC', + // Returns the 3 most recent posts that share at least one tag + ]); + + if ($related_query->have_posts()) : ?> +
+ You may also like - 'ids' ] ); - - if ( ! empty( $current_tags ) ) : - $related_query = new WP_Query( [ - 'post_type' => [ 'article', 'opinion', 'review', 'post' ], - 'tag__in' => $current_tags, - 'post__not_in' => [ get_the_ID() ], - 'posts_per_page' => 3, - 'orderby' => 'date', - 'order' => 'DESC', - ] ); - - if ( $related_query->have_posts() ) : ?> -
- You may also like -
- have_posts() ) : $related_query->the_post(); ?> - - -
- +
+ have_posts()) : $related_query->the_post(); // set up postdata for this loop + ?> + + + +
+ +
+ +
+

+
- -
-

- -
- - + + +
-
- + - - + + -
-
+ +
+endwhile; // End of The Loop +get_footer(); // Load the site footer (outputs footer markup and closing ) +?> \ No newline at end of file diff --git a/wp-content/themes/the-digital-front-child/style.css b/wp-content/themes/the-digital-front-child/style.css index acecd1ff..967cfa18 100644 --- a/wp-content/themes/the-digital-front-child/style.css +++ b/wp-content/themes/the-digital-front-child/style.css @@ -14,2671 +14,2796 @@ *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } body { - margin: 0; - font-family: 'Manrope', sans-serif; - font-weight: 300; - line-height: 1.4; - color: var(--wp--preset--color--contrast, #111); - background: var(--wp--preset--color--base, #fff); - -webkit-font-smoothing: antialiased; + margin: 0; + font-family: "Manrope", sans-serif; + font-weight: 300; + line-height: 1.4; + color: var(--wp--preset--color--contrast, #111); + background: var(--wp--preset--color--base, #fff); + -webkit-font-smoothing: antialiased; } img { - max-width: 100%; - height: auto; - display: block; + max-width: 100%; + height: auto; + display: block; } a { - color: inherit; + color: inherit; } /* === Layout === */ .tdf-container { - width: 100%; - max-width: 1340px; - margin: 0 auto; - padding: 0 clamp(20px, 5vw, 50px); + width: 100%; + max-width: 1340px; + margin: 0 auto; + padding: 0 clamp(20px, 5vw, 50px); } .tdf-container--narrow { - max-width: 760px; + max-width: 760px; } /* === Header === */ .tdf-header { - border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); - position: relative; - z-index: 200; - background: var(--wp--preset--color--base, #fff); + border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); + position: relative; + z-index: 200; + background: var(--wp--preset--color--base, #fff); } .tdf-header__inner { - max-width: 1340px; - margin: 0 auto; - padding: 0 clamp(20px, 5vw, 50px); - display: flex; - align-items: center; - justify-content: space-between; - gap: 2rem; - height: 64px; + max-width: 1340px; + margin: 0 auto; + padding: 0 clamp(20px, 5vw, 50px); + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; + height: 64px; } .tdf-header__site-name { - font-size: 1.25rem; - font-weight: 700; - text-decoration: none; - letter-spacing: -0.5px; + /* Site name / brand link styling */ + font-size: 1.25rem; + font-weight: 700; + text-decoration: none; + letter-spacing: -0.5px; } .tdf-header__site-name:hover { - text-decoration: underline; + text-decoration: underline; } /* Nav */ .tdf-nav { - list-style: none; - margin: 0; - padding: 0; - display: flex; - gap: 0; - font-size: 0.9375rem; + list-style: none; + margin: 0; + padding: 0; + display: flex; + gap: 0; + font-size: 0.9375rem; } .tdf-nav > li { - position: relative; + position: relative; } +/* Primary nav item styling */ .tdf-nav > li > a { - display: flex; - align-items: center; - height: 64px; - padding: 0 1.125rem; - text-decoration: none; - font-weight: 400; - color: var(--wp--preset--color--contrast, #111); - position: relative; - transition: color 0.15s; -} - + display: flex; + align-items: center; + height: 64px; + padding: 0 1.125rem; + text-decoration: none; + font-weight: 400; + color: var(--wp--preset--color--contrast, #111); + position: relative; + transition: color 0.15s; +} + +/* Underline animation (hidden by default, scales on hover/current) */ .tdf-nav > li > a::after { - content: ''; - position: absolute; - bottom: 0; - left: 1.125rem; - right: 1.125rem; - height: 2px; - background: var(--wp--preset--color--contrast, #111); - transform: scaleX(0); - transition: transform 0.2s ease; + content: ""; + position: absolute; + bottom: 0; + left: 1.125rem; + right: 1.125rem; + height: 2px; + background: var(--wp--preset--color--contrast, #111); + transform: scaleX(0); + transition: transform 0.2s ease; } .tdf-nav > li > a:hover::after, .tdf-nav > li.current-menu-item > a::after, .tdf-nav > li.current-page-ancestor > a::after { - transform: scaleX(1); + transform: scaleX(1); } .tdf-nav > li.current-menu-item > a, .tdf-nav > li.current-page-ancestor > a { - font-weight: 500; + font-weight: 500; } /* Dropdown */ .tdf-nav .sub-menu { - display: none; - position: absolute; - top: 100%; - left: 0; - list-style: none; - margin: 0; - padding: 0.5rem 0; - background: var(--wp--preset--color--base, #fff); - border: 1px solid color-mix(in srgb, currentColor 10%, transparent); - border-radius: 0.5rem; - min-width: 190px; - z-index: 200; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); + display: none; + position: absolute; + top: 100%; + left: 0; + list-style: none; + margin: 0; + padding: 0.5rem 0; + background: var(--wp--preset--color--base, #fff); + border: 1px solid color-mix(in srgb, currentColor 10%, transparent); + border-radius: 0.5rem; + min-width: 190px; + z-index: 200; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .tdf-nav li:hover > .sub-menu { - display: block; + display: block; } .tdf-nav .sub-menu a { - display: block; - padding: 0.5rem 1.125rem; - white-space: nowrap; - text-decoration: none; - font-size: 0.875rem; - color: var(--wp--preset--color--contrast, #111); - transition: background 0.12s; + display: block; + padding: 0.5rem 1.125rem; + white-space: nowrap; + text-decoration: none; + font-size: 0.875rem; + color: var(--wp--preset--color--contrast, #111); + transition: background 0.12s; } .tdf-nav .sub-menu a:hover { - background: var(--wp--preset--color--accent-5, #FBFAF3); + background: var(--wp--preset--color--accent-5, #fbfaf3); } /* Auth buttons */ .tdf-header__auth { - display: flex; - align-items: center; - gap: 0.5rem; - flex-shrink: 0; + display: flex; + align-items: center; + gap: 0.5rem; + flex-shrink: 0; } .tdf-header__auth .tdf-btn { - padding: 0.4rem 1rem; - font-size: 0.8125rem; - border-radius: 6px; + padding: 0.4rem 1rem; + font-size: 0.8125rem; + border-radius: 6px; } .tdf-header__auth .tdf-btn--outline { - padding: calc(0.4rem - 1px) calc(1rem - 1px); + padding: calc(0.4rem - 1px) calc(1rem - 1px); } .tdf-header__user { - font-size: 0.8125rem; - font-weight: 500; - color: var(--wp--preset--color--accent-4, #686868); - white-space: nowrap; + font-size: 0.8125rem; + font-weight: 500; + color: var(--wp--preset--color--accent-4, #686868); + white-space: nowrap; } /* Hamburger toggle */ .tdf-header__toggle { - display: none; - flex-direction: column; - justify-content: center; - gap: 5px; - width: 36px; - height: 36px; - padding: 6px; - background: none; - border: none; - cursor: pointer; + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 36px; + height: 36px; + padding: 6px; + background: none; + border: none; + cursor: pointer; } +/* Mobile menu toggle: three-bar button used to open/close primary nav */ + +/* Bars inside hamburger toggle */ .tdf-header__toggle-bar { - display: block; - width: 100%; - height: 2px; - background: var(--wp--preset--color--contrast, #111); - border-radius: 1px; - transition: transform 0.25s ease, opacity 0.25s ease; + display: block; + width: 100%; + height: 2px; + background: var(--wp--preset--color--contrast, #111); + border-radius: 1px; + transition: + transform 0.25s ease, + opacity 0.25s ease; } .tdf-header__toggle.is-active .tdf-header__toggle-bar:nth-child(1) { - transform: translateY(7px) rotate(45deg); + transform: translateY(7px) rotate(45deg); } .tdf-header__toggle.is-active .tdf-header__toggle-bar:nth-child(2) { - opacity: 0; + opacity: 0; } .tdf-header__toggle.is-active .tdf-header__toggle-bar:nth-child(3) { - transform: translateY(-7px) rotate(-45deg); + transform: translateY(-7px) rotate(-45deg); } -/* Mobile nav */ +/* Mobile nav: stacked menu for small screens */ @media (max-width: 768px) { - .tdf-header__toggle { - display: flex; - } - - .tdf-header__nav { - display: none; - position: absolute; - top: 100%; - left: 0; - right: 0; - background: var(--wp--preset--color--base, #fff); - border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); - padding: 0.5rem 0; - z-index: 200; - } - - .tdf-header__nav.is-open { - display: block; - } - - .tdf-nav { - flex-direction: column; - gap: 0; - } - - .tdf-nav > li > a { - height: auto; - padding: 0.75rem clamp(20px, 5vw, 50px); - font-size: 1rem; - } - - .tdf-nav > li > a::after { - display: none; - } - - .tdf-nav .sub-menu { - position: static; - box-shadow: none; - border: none; - border-radius: 0; - padding: 0; - display: block; - background: var(--wp--preset--color--accent-5, #FBFAF3); - } - - .tdf-nav .sub-menu a { - padding: 0.625rem clamp(20px, 5vw, 50px); - padding-left: calc(clamp(20px, 5vw, 50px) + 1rem); - font-size: 0.9375rem; - } - - .tdf-header__auth { - order: 1; - } - - .tdf-header__toggle { - order: 2; - } - - .tdf-header__user { - display: none; - } + .tdf-header__toggle { + display: flex; + } + + .tdf-header__nav { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--wp--preset--color--base, #fff); + border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); + padding: 0.5rem 0; + z-index: 200; + } + + .tdf-header__nav.is-open { + /* When open on mobile, reveal the navigation block */ + display: block; + } + + .tdf-nav { + flex-direction: column; + gap: 0; + } + + .tdf-nav > li > a { + height: auto; + padding: 0.75rem clamp(20px, 5vw, 50px); + font-size: 1rem; + } + + .tdf-nav > li > a::after { + display: none; + } + + .tdf-nav .sub-menu { + position: static; + box-shadow: none; + border: none; + border-radius: 0; + padding: 0; + display: block; + background: var(--wp--preset--color--accent-5, #fbfaf3); + } + + .tdf-nav .sub-menu a { + padding: 0.625rem clamp(20px, 5vw, 50px); + padding-left: calc(clamp(20px, 5vw, 50px) + 1rem); + font-size: 0.9375rem; + } + + .tdf-header__auth { + order: 1; + } + + .tdf-header__toggle { + order: 2; + } + + .tdf-header__user { + display: none; + } } /* === Hero: Magazine Layout === */ .tdf-hero { - position: relative; - padding: clamp(24px, 4vw, 48px) 0 clamp(30px, 5vw, 60px); + position: relative; + padding: clamp(24px, 4vw, 48px) 0 clamp(30px, 5vw, 60px); } .tdf-hero__bg { - position: absolute; - inset: 0; - background: - radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--wp--preset--color--accent-3, #503AA8) 6%, transparent), transparent 60%), - radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--wp--preset--color--accent-1, #FFEE58) 8%, transparent), transparent 50%), - var(--wp--preset--color--accent-5, #FBFAF3); - z-index: -1; + position: absolute; + inset: 0; + background: + radial-gradient( + ellipse at 20% 0%, + color-mix( + in srgb, + var(--wp--preset--color--accent-3, #503aa8) 6%, + transparent + ), + transparent 60% + ), + radial-gradient( + ellipse at 80% 100%, + color-mix( + in srgb, + var(--wp--preset--color--accent-1, #ffee58) 8%, + transparent + ), + transparent 50% + ), + var(--wp--preset--color--accent-5, #fbfaf3); + z-index: -1; } .tdf-hero__layout { - display: grid; - grid-template-columns: 1.4fr 0.6fr; - gap: clamp(16px, 2vw, 24px); - min-height: 420px; + display: grid; + grid-template-columns: 1.4fr 0.6fr; + gap: clamp(16px, 2vw, 24px); + min-height: 420px; } @media (max-width: 900px) { - .tdf-hero__layout { - grid-template-columns: 1fr; - min-height: auto; - } + .tdf-hero__layout { + grid-template-columns: 1fr; + min-height: auto; + } } /* Primary featured post — large card with overlay text */ .tdf-hero__primary { - display: block; - text-decoration: none; - border-radius: 0.75rem; - overflow: hidden; - position: relative; + display: block; + text-decoration: none; + border-radius: 0.75rem; + overflow: hidden; + position: relative; } .tdf-hero__primary-img { - position: relative; - width: 100%; - height: 100%; - min-height: 380px; + position: relative; + width: 100%; + height: 100%; + min-height: 380px; } .tdf-hero__primary-img img { - width: 100%; - height: 100%; - object-fit: cover; + width: 100%; + height: 100%; + object-fit: cover; /* ensure image fills area without distortion */ } +/* Hero images: cover the area and preserve focal point */ + .tdf-hero__primary-overlay { - position: absolute; - inset: 0; - display: flex; - flex-direction: column; - justify-content: flex-end; - padding: clamp(20px, 3vw, 36px); - background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 50%, transparent 100%); - color: #fff; + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: clamp(20px, 3vw, 36px); + background: linear-gradient( + to top, + rgba(0, 0, 0, 0.75) 0%, + rgba(0, 0, 0, 0.2) 50%, + transparent 100% + ); + color: #fff; } .tdf-hero__primary:hover .tdf-hero__primary-overlay { - background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%); + background: linear-gradient( + to top, + rgba(0, 0, 0, 0.85) 0%, + rgba(0, 0, 0, 0.3) 50%, + transparent 100% + ); } .tdf-hero__badge { - display: inline-block; - width: fit-content; - font-size: 0.6875rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 1px; - background: var(--wp--preset--color--accent-1, #FFEE58); - color: var(--wp--preset--color--contrast, #111); - padding: 0.25rem 0.65rem; - border-radius: 3px; - margin-bottom: 0.75rem; + display: inline-block; + width: fit-content; + font-size: 0.6875rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + background: var(--wp--preset--color--accent-1, #ffee58); + color: var(--wp--preset--color--contrast, #111); + padding: 0.25rem 0.65rem; + border-radius: 3px; + margin-bottom: 0.75rem; } .tdf-hero__primary-title { - font-size: clamp(1.5rem, 3vw, 2.15rem); - font-weight: 400; - line-height: 1.2; - letter-spacing: -0.3px; - margin: 0 0 0.5rem; + font-size: clamp(1.5rem, 3vw, 2.15rem); + font-weight: 400; + line-height: 1.2; + letter-spacing: -0.3px; + margin: 0 0 0.5rem; } .tdf-hero__primary-meta { - font-size: 0.8125rem; - opacity: 0.8; - display: flex; - gap: 0.35rem; + font-size: 0.8125rem; + opacity: 0.8; + display: flex; + gap: 0.35rem; } /* Placeholder — abstract pattern instead of a letter */ .tdf-hero__placeholder { - position: relative; - width: 100%; - height: 100%; - min-height: 380px; - background: - linear-gradient(135deg, - var(--wp--preset--color--contrast, #111) 0%, - color-mix(in srgb, var(--wp--preset--color--accent-3, #503AA8) 70%, #111) 50%, - var(--wp--preset--color--contrast, #111) 100% - ); - overflow: hidden; + position: relative; + width: 100%; + height: 100%; + min-height: 380px; + background: linear-gradient( + 135deg, + var(--wp--preset--color--contrast, #111) 0%, + color-mix(in srgb, var(--wp--preset--color--accent-3, #503aa8) 70%, #111) + 50%, + var(--wp--preset--color--contrast, #111) 100% + ); + overflow: hidden; } .tdf-hero__placeholder::before { - content: ''; - position: absolute; - inset: 0; - background: - radial-gradient(circle at 25% 30%, rgba(255,255,255,0.06) 0%, transparent 50%), - radial-gradient(circle at 75% 70%, rgba(255,255,255,0.04) 0%, transparent 40%); + content: ""; + position: absolute; + inset: 0; + background: + radial-gradient( + circle at 25% 30%, + rgba(255, 255, 255, 0.06) 0%, + transparent 50% + ), + radial-gradient( + circle at 75% 70%, + rgba(255, 255, 255, 0.04) 0%, + transparent 40% + ); } .tdf-hero__placeholder span { - display: none; + display: none; } .tdf-hero__placeholder--sm { - min-height: 0; - height: 100%; - background: - linear-gradient(135deg, - var(--wp--preset--color--contrast, #111) 0%, - color-mix(in srgb, var(--wp--preset--color--accent-3, #503AA8) 50%, #111) 100% - ); + min-height: 0; + height: 100%; + background: linear-gradient( + 135deg, + var(--wp--preset--color--contrast, #111) 0%, + color-mix(in srgb, var(--wp--preset--color--accent-3, #503aa8) 50%, #111) + 100% + ); } /* Solo hero (1 article) — primary takes more space, sidebar has CTA */ .tdf-hero__layout--solo { - grid-template-columns: 1.8fr 0.6fr; + grid-template-columns: 1.8fr 0.6fr; } .tdf-hero__layout--solo .tdf-hero__sidebar { - justify-content: center; + justify-content: center; } .tdf-hero__side-cta { - background: var(--wp--preset--color--base, #fff); - border: 1px solid color-mix(in srgb, currentColor 6%, transparent); - border-radius: 0.5rem; - padding: clamp(16px, 2vw, 24px); - display: flex; - flex-direction: column; - gap: 0.75rem; + background: var(--wp--preset--color--base, #fff); + border: 1px solid color-mix(in srgb, currentColor 6%, transparent); + border-radius: 0.5rem; + padding: clamp(16px, 2vw, 24px); + display: flex; + flex-direction: column; + gap: 0.75rem; } .tdf-hero__side-cta-text { - font-size: 0.875rem; - color: var(--wp--preset--color--accent-4, #686868); - line-height: 1.5; - margin: 0; + font-size: 0.875rem; + color: var(--wp--preset--color--accent-4, #686868); + line-height: 1.5; + margin: 0; } .tdf-hero__side-cta .tdf-hero__eyebrow { - margin: 0; + margin: 0; } .tdf-hero__primary-excerpt { - font-size: 0.9375rem; - font-weight: 300; - margin: 0 0 0.5rem; - opacity: 0.8; - max-width: 500px; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + font-size: 0.9375rem; + font-weight: 300; + margin: 0 0 0.5rem; + opacity: 0.8; + max-width: 500px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } @media (max-width: 900px) { - .tdf-hero__layout--solo { - grid-template-columns: 1fr; - } + .tdf-hero__layout--solo { + grid-template-columns: 1fr; + } } /* Eyebrow shared */ .tdf-hero__eyebrow { - font-size: 0.6875rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 1.4px; - color: var(--wp--preset--color--accent-3, #503AA8); - margin: 0 0 0.75rem; + font-size: 0.6875rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1.4px; + color: var(--wp--preset--color--accent-3, #503aa8); + margin: 0 0 0.75rem; } /* === Hero: Empty state === */ .tdf-hero__empty { - text-align: center; - padding: clamp(60px, 10vw, 120px) 0; - max-width: 600px; - margin: 0 auto; + text-align: center; + padding: clamp(60px, 10vw, 120px) 0; + max-width: 600px; + margin: 0 auto; } .tdf-hero__empty-title { - font-size: clamp(2.15rem, 5vw, 3.5rem); - font-weight: 400; - line-height: 1.1; - letter-spacing: -0.5px; - margin: 0 0 1rem; + font-size: clamp(2.15rem, 5vw, 3.5rem); + font-weight: 400; + line-height: 1.1; + letter-spacing: -0.5px; + margin: 0 0 1rem; } .tdf-hero__empty-sub { - font-size: clamp(1rem, 2vw, 1.25rem); - color: var(--wp--preset--color--accent-4, #686868); - margin: 0 0 2rem; + font-size: clamp(1rem, 2vw, 1.25rem); + color: var(--wp--preset--color--accent-4, #686868); + margin: 0 0 2rem; } /* Sidebar stack */ .tdf-hero__sidebar { - display: flex; - flex-direction: column; - gap: clamp(12px, 1.5vw, 16px); + display: flex; + flex-direction: column; + gap: clamp(12px, 1.5vw, 16px); } @media (max-width: 900px) { - .tdf-hero__sidebar { - flex-direction: row; - flex-wrap: wrap; - } - .tdf-hero__side-card, - .tdf-hero__side-cta { - flex: 1 1 280px; - } + .tdf-hero__sidebar { + flex-direction: row; + flex-wrap: wrap; + } + .tdf-hero__side-card, + .tdf-hero__side-cta { + flex: 1 1 280px; + } } /* Side cards — overlay style */ .tdf-hero__side-card { - display: block; - flex: 1; - position: relative; - text-decoration: none; - border-radius: 0.5rem; - overflow: hidden; - min-height: 160px; + display: block; + flex: 1; + position: relative; + text-decoration: none; + border-radius: 0.5rem; + overflow: hidden; + min-height: 160px; } .tdf-hero__side-card:hover .tdf-hero__side-img img { - transform: scale(1.03); + transform: scale(1.03); } .tdf-hero__side-img { - position: absolute; - inset: 0; - overflow: hidden; + position: absolute; + inset: 0; + overflow: hidden; } .tdf-hero__side-img img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - transition: transform 0.3s ease; + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: transform 0.3s ease; } .tdf-hero__side-body { - position: relative; - z-index: 1; - display: flex; - flex-direction: column; - justify-content: flex-end; - height: 100%; - padding: 1rem; - background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 60%, transparent 100%); - color: #fff; + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; + height: 100%; + padding: 1rem; + background: linear-gradient( + to top, + rgba(0, 0, 0, 0.7) 0%, + rgba(0, 0, 0, 0.15) 60%, + transparent 100% + ); + color: #fff; } .tdf-hero__side-title { - font-size: 0.9375rem; - font-weight: 500; - line-height: 1.3; - margin: 0 0 0.25rem; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + font-size: 0.9375rem; + font-weight: 500; + line-height: 1.3; + margin: 0 0 0.25rem; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } .tdf-hero__side-date { - font-size: 0.6875rem; - opacity: 0.7; + font-size: 0.6875rem; + opacity: 0.7; } /* === Buttons === */ .tdf-btn { - display: inline-block; - padding: 1rem 2.25rem; - font-size: 1rem; - font-weight: 400; - text-decoration: none; - border-radius: 0; - transition: background 0.15s, color 0.15s; - cursor: pointer; + display: inline-block; + padding: 1rem 2.25rem; + font-size: 1rem; + font-weight: 400; + text-decoration: none; + border-radius: 0; + transition: + background 0.15s, + color 0.15s; + cursor: pointer; } .tdf-btn--primary { - background: var(--wp--preset--color--contrast, #111); - color: var(--wp--preset--color--base, #fff); + background: var(--wp--preset--color--contrast, #111); + color: var(--wp--preset--color--base, #fff); } .tdf-btn--primary:hover { - background: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 85%, transparent); + background: color-mix( + in srgb, + var(--wp--preset--color--contrast, #111) 85%, + transparent + ); } .tdf-btn--outline { - background: transparent; - color: var(--wp--preset--color--contrast, #111); - border: 1px solid currentColor; - padding: calc(1rem - 1px) calc(2.25rem - 1px); + background: transparent; + color: var(--wp--preset--color--contrast, #111); + border: 1px solid currentColor; + padding: calc(1rem - 1px) calc(2.25rem - 1px); } .tdf-btn--outline:hover { - background: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 5%, transparent); + background: color-mix( + in srgb, + var(--wp--preset--color--contrast, #111) 5%, + transparent + ); } .tdf-btn--sm { - padding: 0.65rem 1.5rem; - font-size: 0.875rem; + padding: 0.65rem 1.5rem; + font-size: 0.875rem; } /* === Sections === */ .tdf-section { - padding: clamp(30px, 7vw, 70px) 0 clamp(50px, 7vw, 90px); + padding: clamp(30px, 7vw, 70px) 0 clamp(50px, 7vw, 90px); } .tdf-section__heading { - font-size: clamp(1.75rem, 3vw, 2rem); - font-weight: 400; - line-height: 1.125; - letter-spacing: -0.1px; - margin: 0; + font-size: clamp(1.75rem, 3vw, 2rem); + font-weight: 400; + line-height: 1.125; + letter-spacing: -0.1px; + margin: 0; } /* === Card === */ .tdf-card__image img { - width: 100%; - aspect-ratio: 16 / 9; - object-fit: cover; - border-radius: 0.5rem; + width: 100%; + aspect-ratio: 16 / 9; + object-fit: cover; + border-radius: 0.5rem; } .tdf-card__image--placeholder { - display: flex; - align-items: center; - justify-content: center; - aspect-ratio: 16 / 9; - background: - linear-gradient(135deg, - var(--wp--preset--color--accent-5, #FBFAF3) 0%, - color-mix(in srgb, var(--wp--preset--color--accent-3, #503AA8) 8%, var(--wp--preset--color--accent-5, #FBFAF3)) 100% - ); - border-radius: 0.5rem; - text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + aspect-ratio: 16 / 9; + background: linear-gradient( + 135deg, + var(--wp--preset--color--accent-5, #fbfaf3) 0%, + color-mix( + in srgb, + var(--wp--preset--color--accent-3, #503aa8) 8%, + var(--wp--preset--color--accent-5, #fbfaf3) + ) + 100% + ); + border-radius: 0.5rem; + text-decoration: none; } .tdf-card__image--placeholder span { - font-size: 1.75rem; - font-weight: 600; - color: var(--wp--preset--color--accent-3, #503AA8); - opacity: 0.25; + font-size: 1.75rem; + font-weight: 600; + color: var(--wp--preset--color--accent-3, #503aa8); + opacity: 0.25; } .tdf-card__body { - padding-top: 1rem; + padding-top: 1rem; } .tdf-card__date { - display: block; - font-size: 0.875rem; - color: var(--wp--preset--color--accent-4, #686868); - margin-bottom: 0.5rem; + display: block; + font-size: 0.875rem; + color: var(--wp--preset--color--accent-4, #686868); + margin-bottom: 0.5rem; } .tdf-card__title { - font-size: clamp(1.125rem, 2vw, 1.375rem); - font-weight: 400; - line-height: 1.25; - margin: 0 0 0.5rem; + font-size: clamp(1.125rem, 2vw, 1.375rem); + font-weight: 400; + line-height: 1.25; + margin: 0 0 0.5rem; } .tdf-card__title a { - text-decoration: none; + text-decoration: none; } .tdf-card__title a:hover { - text-decoration: underline; + text-decoration: underline; } .tdf-card__excerpt { - font-size: 1rem; - color: var(--wp--preset--color--accent-4, #686868); - margin: 0 0 0.5rem; + font-size: 1rem; + color: var(--wp--preset--color--accent-4, #686868); + margin: 0 0 0.5rem; } .tdf-card__meta { - font-size: 0.875rem; - color: var(--wp--preset--color--accent-4, #686868); + font-size: 0.875rem; + color: var(--wp--preset--color--accent-4, #686868); } /* === What We Cover (Topics) === */ .tdf-topics { - padding: clamp(40px, 7vw, 80px) 0; - border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); + padding: clamp(40px, 7vw, 80px) 0; + border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); } .tdf-topics__header { - margin-bottom: clamp(24px, 4vw, 40px); + margin-bottom: clamp(24px, 4vw, 40px); } .tdf-topics__sub { - font-size: 1rem; - color: var(--wp--preset--color--accent-4, #686868); - margin: 0.5rem 0 0; + font-size: 1rem; + color: var(--wp--preset--color--accent-4, #686868); + margin: 0.5rem 0 0; } .tdf-topics__grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: clamp(16px, 2vw, 24px); + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: clamp(16px, 2vw, 24px); } @media (max-width: 900px) { - .tdf-topics__grid { - grid-template-columns: repeat(2, 1fr); - } + .tdf-topics__grid { + grid-template-columns: repeat(2, 1fr); + } } @media (max-width: 500px) { - .tdf-topics__grid { - grid-template-columns: 1fr; - } + .tdf-topics__grid { + grid-template-columns: 1fr; + } } .tdf-topic { - padding: clamp(20px, 2.5vw, 28px); - border: 1px solid color-mix(in srgb, currentColor 8%, transparent); - border-radius: 0.75rem; - transition: border-color 0.2s, box-shadow 0.2s; + padding: clamp(20px, 2.5vw, 28px); + border: 1px solid color-mix(in srgb, currentColor 8%, transparent); + border-radius: 0.75rem; + transition: + border-color 0.2s, + box-shadow 0.2s; } .tdf-topic:hover { - border-color: color-mix(in srgb, var(--wp--preset--color--accent-3, #503AA8) 25%, transparent); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); + border-color: color-mix( + in srgb, + var(--wp--preset--color--accent-3, #503aa8) 25%, + transparent + ); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); } .tdf-topic__icon { - width: 44px; - height: 44px; - display: flex; - align-items: center; - justify-content: center; - background: var(--wp--preset--color--accent-5, #FBFAF3); - border-radius: 12px; - margin-bottom: 1rem; - color: var(--wp--preset--color--accent-3, #503AA8); + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: var(--wp--preset--color--accent-5, #fbfaf3); + border-radius: 12px; + margin-bottom: 1rem; + color: var(--wp--preset--color--accent-3, #503aa8); } .tdf-topic__title { - font-size: 1rem; - font-weight: 600; - margin: 0 0 0.375rem; + font-size: 1rem; + font-weight: 600; + margin: 0 0 0.375rem; } .tdf-topic__desc { - font-size: 0.8125rem; - color: var(--wp--preset--color--accent-4, #686868); - line-height: 1.5; - margin: 0; + font-size: 0.8125rem; + color: var(--wp--preset--color--accent-4, #686868); + line-height: 1.5; + margin: 0; } /* === From the Blog (Recent Posts list) === */ .tdf-recent { - padding: clamp(40px, 7vw, 80px) 0; - background: var(--wp--preset--color--accent-5, #FBFAF3); + padding: clamp(40px, 7vw, 80px) 0; + background: var(--wp--preset--color--accent-5, #fbfaf3); } .tdf-recent .tdf-section__heading { - margin-bottom: clamp(20px, 3vw, 32px); + margin-bottom: clamp(20px, 3vw, 32px); } .tdf-recent__list { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .tdf-recent__item { - display: flex; - align-items: center; - gap: 1.25rem; - padding: 1.125rem 0; - border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent); - text-decoration: none; - transition: background 0.12s; + display: flex; + align-items: center; + gap: 1.25rem; + padding: 1.125rem 0; + border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent); + text-decoration: none; + transition: background 0.12s; } .tdf-recent__item:first-child { - border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); + border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); } .tdf-recent__item:hover { - background: rgba(0, 0, 0, 0.015); + background: rgba(0, 0, 0, 0.015); } .tdf-recent__num { - font-size: 0.75rem; - font-weight: 700; - font-variant-numeric: tabular-nums; - color: var(--wp--preset--color--accent-3, #503AA8); - opacity: 0.5; - flex-shrink: 0; - width: 1.75rem; + font-size: 0.75rem; + font-weight: 700; + font-variant-numeric: tabular-nums; + color: var(--wp--preset--color--accent-3, #503aa8); + opacity: 0.5; + flex-shrink: 0; + width: 1.75rem; } .tdf-recent__body { - flex: 1; - min-width: 0; + flex: 1; + min-width: 0; } .tdf-recent__title { - font-size: 1.0625rem; - font-weight: 500; - margin: 0 0 0.2rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + font-size: 1.0625rem; + font-weight: 500; + margin: 0 0 0.2rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .tdf-recent__date { - font-size: 0.8125rem; - color: var(--wp--preset--color--accent-4, #686868); + font-size: 0.8125rem; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-recent__arrow { - flex-shrink: 0; - font-size: 1rem; - opacity: 0; - transform: translateX(-4px); - transition: opacity 0.2s, transform 0.2s; + flex-shrink: 0; + font-size: 1rem; + opacity: 0; + transform: translateX(-4px); + transition: + opacity 0.2s, + transform 0.2s; } .tdf-recent__item:hover .tdf-recent__arrow { - opacity: 0.5; - transform: translateX(0); + opacity: 0.5; + transform: translateX(0); } /* === Newsletter CTA === */ .tdf-newsletter { - padding: clamp(40px, 7vw, 80px) 0; + padding: clamp(40px, 7vw, 80px) 0; } .tdf-newsletter__inner { - display: grid; - grid-template-columns: 1fr 1fr; - gap: clamp(30px, 5vw, 60px); - align-items: center; - background: var(--wp--preset--color--contrast, #111); - color: var(--wp--preset--color--base, #fff); - border-radius: 1rem; - padding: clamp(32px, 5vw, 56px); + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(30px, 5vw, 60px); + align-items: center; + background: var(--wp--preset--color--contrast, #111); + color: var(--wp--preset--color--base, #fff); + border-radius: 1rem; + padding: clamp(32px, 5vw, 56px); } @media (max-width: 768px) { - .tdf-newsletter__inner { - grid-template-columns: 1fr; - text-align: center; - } + .tdf-newsletter__inner { + grid-template-columns: 1fr; + text-align: center; + } } .tdf-newsletter__title { - font-size: clamp(1.75rem, 3vw, 2.15rem); - font-weight: 400; - line-height: 1.15; - letter-spacing: -0.3px; - margin: 0 0 0.75rem; + font-size: clamp(1.75rem, 3vw, 2.15rem); + font-weight: 400; + line-height: 1.15; + letter-spacing: -0.3px; + margin: 0 0 0.75rem; } .tdf-newsletter__desc { - font-size: 0.9375rem; - opacity: 0.65; - margin: 0; - line-height: 1.55; + font-size: 0.9375rem; + opacity: 0.65; + margin: 0; + line-height: 1.55; } .tdf-newsletter__field { - display: flex; - gap: 0.5rem; + display: flex; + gap: 0.5rem; } @media (max-width: 480px) { - .tdf-newsletter__field { - flex-direction: column; - } + .tdf-newsletter__field { + flex-direction: column; + } } .tdf-newsletter__input { - flex: 1; - padding: 0.7rem 1rem; - font-size: 0.9375rem; - font-family: inherit; - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 0; - background: rgba(255, 255, 255, 0.08); - color: #fff; - outline: none; - transition: border-color 0.15s; + flex: 1; + padding: 0.7rem 1rem; + font-size: 0.9375rem; + font-family: inherit; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 0; + background: rgba(255, 255, 255, 0.08); + color: #fff; + outline: none; + transition: border-color 0.15s; } .tdf-newsletter__input::placeholder { - color: rgba(255, 255, 255, 0.4); + color: rgba(255, 255, 255, 0.4); } .tdf-newsletter__input:focus { - border-color: rgba(255, 255, 255, 0.4); + border-color: rgba(255, 255, 255, 0.4); } .tdf-newsletter__form .tdf-btn--primary { - background: var(--wp--preset--color--base, #fff); - color: var(--wp--preset--color--contrast, #111); - flex-shrink: 0; + background: var(--wp--preset--color--base, #fff); + color: var(--wp--preset--color--contrast, #111); + flex-shrink: 0; } .tdf-newsletter__form .tdf-btn--primary:hover { - background: color-mix(in srgb, var(--wp--preset--color--base, #fff) 85%, transparent); + background: color-mix( + in srgb, + var(--wp--preset--color--base, #fff) 85%, + transparent + ); } .tdf-newsletter__note { - font-size: 0.75rem; - opacity: 0.4; - margin: 0.625rem 0 0; + font-size: 0.75rem; + opacity: 0.4; + margin: 0.625rem 0 0; } /* === Stats === */ .tdf-stats { - padding: clamp(30px, 5vw, 60px) 0; - border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); - border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent); + padding: clamp(30px, 5vw, 60px) 0; + border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); + border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent); } .tdf-stats__grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: clamp(16px, 3vw, 30px); - text-align: center; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: clamp(16px, 3vw, 30px); + text-align: center; } @media (max-width: 600px) { - .tdf-stats__grid { - grid-template-columns: repeat(2, 1fr); - } + .tdf-stats__grid { + grid-template-columns: repeat(2, 1fr); + } } .tdf-stat { - display: flex; - flex-direction: column; - gap: 0.375rem; + display: flex; + flex-direction: column; + gap: 0.375rem; } .tdf-stat__number { - font-size: clamp(2rem, 4vw, 2.75rem); - font-weight: 400; - line-height: 1; - letter-spacing: -0.5px; - color: var(--wp--preset--color--contrast, #111); + font-size: clamp(2rem, 4vw, 2.75rem); + font-weight: 400; + line-height: 1; + letter-spacing: -0.5px; + color: var(--wp--preset--color--contrast, #111); } .tdf-stat__label { - font-size: 0.8125rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.8px; - color: var(--wp--preset--color--accent-4, #686868); + font-size: 0.8125rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.8px; + color: var(--wp--preset--color--accent-4, #686868); } /* === Quick Links === */ .tdf-quicklinks { - padding: clamp(40px, 7vw, 80px) 0; - background: var(--wp--preset--color--accent-5, #FBFAF3); + padding: clamp(40px, 7vw, 80px) 0; + background: var(--wp--preset--color--accent-5, #fbfaf3); } .tdf-quicklinks__heading { - margin-bottom: clamp(20px, 3vw, 32px) !important; + margin-bottom: clamp(20px, 3vw, 32px) !important; } .tdf-quicklinks__grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: clamp(16px, 2vw, 20px); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: clamp(16px, 2vw, 20px); } @media (max-width: 700px) { - .tdf-quicklinks__grid { - grid-template-columns: 1fr; - } + .tdf-quicklinks__grid { + grid-template-columns: 1fr; + } } .tdf-quicklink { - display: flex; - flex-direction: column; - padding: clamp(24px, 3vw, 32px); - background: var(--wp--preset--color--base, #fff); - border: 1px solid color-mix(in srgb, currentColor 6%, transparent); - border-radius: 0.75rem; - text-decoration: none; - transition: transform 0.2s, box-shadow 0.2s; + display: flex; + flex-direction: column; + padding: clamp(24px, 3vw, 32px); + background: var(--wp--preset--color--base, #fff); + border: 1px solid color-mix(in srgb, currentColor 6%, transparent); + border-radius: 0.75rem; + text-decoration: none; + transition: + transform 0.2s, + box-shadow 0.2s; } .tdf-quicklink:hover { - transform: translateY(-3px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); } .tdf-quicklink__icon-wrap { - width: 40px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 10px; - background: var(--wp--preset--color--accent-5, #FBFAF3); - margin-bottom: 1rem; - font-size: 1.125rem; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 10px; + background: var(--wp--preset--color--accent-5, #fbfaf3); + margin-bottom: 1rem; + font-size: 1.125rem; } .tdf-quicklink__icon { - line-height: 1; + line-height: 1; } .tdf-quicklink__title { - font-size: 1.0625rem; - font-weight: 600; - margin: 0 0 0.375rem; + font-size: 1.0625rem; + font-weight: 600; + margin: 0 0 0.375rem; } .tdf-quicklink__desc { - font-size: 0.875rem; - color: var(--wp--preset--color--accent-4, #686868); - margin: 0 0 1rem; - line-height: 1.5; - flex: 1; + font-size: 0.875rem; + color: var(--wp--preset--color--accent-4, #686868); + margin: 0 0 1rem; + line-height: 1.5; + flex: 1; } .tdf-quicklink__arrow { - font-size: 1.125rem; - opacity: 0; - transform: translateX(-4px); - transition: opacity 0.2s, transform 0.2s; + font-size: 1.125rem; + opacity: 0; + transform: translateX(-4px); + transition: + opacity 0.2s, + transform 0.2s; } .tdf-quicklink:hover .tdf-quicklink__arrow { - opacity: 1; - transform: translateX(0); + opacity: 1; + transform: translateX(0); } /* === Articles Section (front page) === */ .tdf-articles-section { - padding: clamp(40px, 7vw, 80px) 0; - border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); + padding: clamp(40px, 7vw, 80px) 0; + border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); } .tdf-articles-section .tdf-section__heading { - margin-bottom: clamp(20px, 3vw, 32px); + margin-bottom: clamp(20px, 3vw, 32px); } /* === Opinions Section (front page) === */ .tdf-opinions { - padding: clamp(40px, 7vw, 80px) 0; - background: var(--wp--preset--color--accent-5, #FBFAF3); + padding: clamp(40px, 7vw, 80px) 0; + background: var(--wp--preset--color--accent-5, #fbfaf3); } .tdf-opinions .tdf-section__heading { - margin-bottom: clamp(20px, 3vw, 32px); + margin-bottom: clamp(20px, 3vw, 32px); } .tdf-opinions__grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1.5rem; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; } @media (max-width: 768px) { - .tdf-opinions__grid { - grid-template-columns: 1fr; - } + .tdf-opinions__grid { + grid-template-columns: 1fr; + } } .tdf-opinions__card { - display: flex; - flex-direction: column; - background: #fff; - border-radius: 10px; - overflow: hidden; - text-decoration: none; - color: inherit; - border: 1px solid color-mix(in srgb, currentColor 6%, transparent); - transition: box-shadow 0.2s, transform 0.2s; + display: flex; + flex-direction: column; + background: #fff; + border-radius: 10px; + overflow: hidden; + text-decoration: none; + color: inherit; + border: 1px solid color-mix(in srgb, currentColor 6%, transparent); + transition: + box-shadow 0.2s, + transform 0.2s; } .tdf-opinions__card:hover { - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); - transform: translateY(-2px); + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); + transform: translateY(-2px); } .tdf-opinions__img { - aspect-ratio: 16 / 9; - overflow: hidden; + aspect-ratio: 16 / 9; + overflow: hidden; } .tdf-opinions__img img { - width: 100%; - height: 100%; - object-fit: cover; + width: 100%; + height: 100%; + object-fit: cover; } .tdf-opinions__body { - padding: 1.25rem 1.5rem 1.5rem; - display: flex; - flex-direction: column; - gap: 0.5rem; + padding: 1.25rem 1.5rem 1.5rem; + display: flex; + flex-direction: column; + gap: 0.5rem; } .tdf-opinions__title { - font-size: 1.125rem; - font-weight: 600; - margin: 0; - line-height: 1.3; + font-size: 1.125rem; + font-weight: 600; + margin: 0; + line-height: 1.3; } .tdf-opinions__quote { - margin: 0; - font-size: 0.9375rem; - font-style: italic; - color: var(--wp--preset--color--accent-4, #686868); - line-height: 1.5; + margin: 0; + font-size: 0.9375rem; + font-style: italic; + color: var(--wp--preset--color--accent-4, #686868); + line-height: 1.5; } .tdf-opinions__excerpt { - margin: 0; - font-size: 0.9375rem; - color: var(--wp--preset--color--accent-4, #686868); - line-height: 1.5; + margin: 0; + font-size: 0.9375rem; + color: var(--wp--preset--color--accent-4, #686868); + line-height: 1.5; } .tdf-opinions__meta { - display: flex; - align-items: center; - gap: 0.4rem; - font-size: 0.8125rem; - color: var(--wp--preset--color--accent-4, #686868); + display: flex; + align-items: center; + gap: 0.4rem; + font-size: 0.8125rem; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-opinions__author { - font-weight: 500; + font-weight: 500; } .tdf-opinions__related { - display: inline-block; - font-size: 0.75rem; - font-weight: 500; - color: var(--wp--preset--color--accent-3, #503AA8); - opacity: 0.75; + display: inline-block; + font-size: 0.75rem; + font-weight: 500; + color: var(--wp--preset--color--accent-3, #503aa8); + opacity: 0.75; } /* === Category + Date Filter === */ .tdf-filter__controls { - display: flex; - align-items: flex-end; - justify-content: space-between; - gap: 1rem; - flex-wrap: wrap; - margin-bottom: clamp(20px, 3vw, 28px); - padding-bottom: clamp(16px, 2vw, 24px); - border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent); + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 1rem; + flex-wrap: wrap; + margin-bottom: clamp(20px, 3vw, 28px); + padding-bottom: clamp(16px, 2vw, 24px); + border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent); } .tdf-filter__tabs { - display: flex; - gap: 0.375rem; - flex-wrap: wrap; + display: flex; + gap: 0.375rem; + flex-wrap: wrap; } .tdf-filter__tab { - display: inline-block; - padding: 0.4rem 0.875rem; - font-size: 0.8125rem; - font-weight: 500; - text-decoration: none; - border: 1px solid color-mix(in srgb, currentColor 10%, transparent); - border-radius: 100px; - color: var(--wp--preset--color--contrast, #111); - transition: background 0.15s, border-color 0.15s, color 0.15s; + display: inline-block; + padding: 0.4rem 0.875rem; + font-size: 0.8125rem; + font-weight: 500; + text-decoration: none; + border: 1px solid color-mix(in srgb, currentColor 10%, transparent); + border-radius: 100px; + color: var(--wp--preset--color--contrast, #111); + transition: + background 0.15s, + border-color 0.15s, + color 0.15s; } .tdf-filter__tab:hover { - background: var(--wp--preset--color--accent-5, #FBFAF3); - border-color: color-mix(in srgb, currentColor 18%, transparent); + background: var(--wp--preset--color--accent-5, #fbfaf3); + border-color: color-mix(in srgb, currentColor 18%, transparent); } .tdf-filter__tab.is-active { - background: var(--wp--preset--color--contrast, #111); - color: var(--wp--preset--color--base, #fff); - border-color: var(--wp--preset--color--contrast, #111); + background: var(--wp--preset--color--contrast, #111); + color: var(--wp--preset--color--base, #fff); + border-color: var(--wp--preset--color--contrast, #111); } .tdf-filter__dates { - display: flex; - align-items: flex-end; - gap: 0.5rem; - flex-wrap: wrap; + display: flex; + align-items: flex-end; + gap: 0.5rem; + flex-wrap: wrap; } .tdf-filter__date-label { - display: flex; - flex-direction: column; - gap: 0.2rem; - font-size: 0.625rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.8px; - color: var(--wp--preset--color--accent-4, #686868); + display: flex; + flex-direction: column; + gap: 0.2rem; + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.8px; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-filter__date-input { - padding: 0.4rem 0.5rem; - font-size: 0.8125rem; - font-family: inherit; - border: 1px solid color-mix(in srgb, currentColor 12%, transparent); - border-radius: 0.25rem; - background: var(--wp--preset--color--base, #fff); - color: var(--wp--preset--color--contrast, #111); - width: 130px; + padding: 0.4rem 0.5rem; + font-size: 0.8125rem; + font-family: inherit; + border: 1px solid color-mix(in srgb, currentColor 12%, transparent); + border-radius: 0.25rem; + background: var(--wp--preset--color--base, #fff); + color: var(--wp--preset--color--contrast, #111); + width: 130px; } .tdf-filter__date-input:focus { - outline: none; - border-color: var(--wp--preset--color--accent-3, #503AA8); + outline: none; + border-color: var(--wp--preset--color--accent-3, #503aa8); } .tdf-filter__dates .tdf-btn { - padding: 0.4rem 0.875rem; - font-size: 0.8125rem; + padding: 0.4rem 0.875rem; + font-size: 0.8125rem; } .tdf-filter__clear { - font-size: 0.75rem; - color: var(--wp--preset--color--accent-4, #686868); - text-decoration: none; - padding-bottom: 0.4rem; + font-size: 0.75rem; + color: var(--wp--preset--color--accent-4, #686868); + text-decoration: none; + padding-bottom: 0.4rem; } .tdf-filter__clear:hover { - color: var(--wp--preset--color--contrast, #111); - text-decoration: underline; + color: var(--wp--preset--color--contrast, #111); + text-decoration: underline; } @media (max-width: 640px) { - .tdf-filter__controls { - flex-direction: column; - align-items: flex-start; - } + .tdf-filter__controls { + flex-direction: column; + align-items: flex-start; + } } /* === Pagination (WP-PageNavi + fallback) === */ .tdf-pagination { - margin-top: clamp(30px, 5vw, 48px); - display: flex; - justify-content: center; + margin-top: clamp(30px, 5vw, 48px); + display: flex; + justify-content: center; } .tdf-pagination .wp-pagenavi { - display: flex; - gap: 0.375rem; - align-items: center; + display: flex; + gap: 0.375rem; + align-items: center; } .tdf-pagination .wp-pagenavi a, .tdf-pagination .wp-pagenavi span, .tdf-pagination .page-numbers { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 40px; - height: 40px; - padding: 0 0.75rem; - font-size: 0.875rem; - font-weight: 500; - text-decoration: none; - border: 1px solid color-mix(in srgb, currentColor 12%, transparent); - border-radius: 0.375rem; - color: var(--wp--preset--color--contrast, #111); - background: transparent; - transition: background 0.15s, border-color 0.15s; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 40px; + height: 40px; + padding: 0 0.75rem; + font-size: 0.875rem; + font-weight: 500; + text-decoration: none; + border: 1px solid color-mix(in srgb, currentColor 12%, transparent); + border-radius: 0.375rem; + color: var(--wp--preset--color--contrast, #111); + background: transparent; + transition: + background 0.15s, + border-color 0.15s; } .tdf-pagination .wp-pagenavi a:hover, .tdf-pagination .page-numbers:hover { - background: var(--wp--preset--color--accent-5, #FBFAF3); - border-color: color-mix(in srgb, currentColor 25%, transparent); + background: var(--wp--preset--color--accent-5, #fbfaf3); + border-color: color-mix(in srgb, currentColor 25%, transparent); } .tdf-pagination .wp-pagenavi .current, .tdf-pagination .page-numbers.current { - background: var(--wp--preset--color--contrast, #111); - color: var(--wp--preset--color--base, #fff); - border-color: var(--wp--preset--color--contrast, #111); + background: var(--wp--preset--color--contrast, #111); + color: var(--wp--preset--color--base, #fff); + border-color: var(--wp--preset--color--contrast, #111); } .tdf-pagination .wp-pagenavi .pages { - border: none; - font-size: 0.75rem; - color: var(--wp--preset--color--accent-4, #686868); - min-width: auto; + border: none; + font-size: 0.75rem; + color: var(--wp--preset--color--accent-4, #686868); + min-width: auto; } /* === Archive === */ .tdf-archive { - padding: clamp(30px, 5vw, 60px) 0 clamp(50px, 7vw, 90px); + padding: clamp(30px, 5vw, 60px) 0 clamp(50px, 7vw, 90px); } .tdf-archive__header { - margin-bottom: clamp(24px, 4vw, 40px); + margin-bottom: clamp(24px, 4vw, 40px); } .tdf-archive__title { - font-size: clamp(2rem, 4vw, 2.5rem); - font-weight: 400; - line-height: 1.125; - letter-spacing: -0.4px; - margin: 0 0 0.5rem; + font-size: clamp(2rem, 4vw, 2.5rem); + font-weight: 400; + line-height: 1.125; + letter-spacing: -0.4px; + margin: 0 0 0.5rem; } .tdf-archive__desc { - font-size: 1rem; - color: var(--wp--preset--color--accent-4, #686868); - margin: 0; + font-size: 1rem; + color: var(--wp--preset--color--accent-4, #686868); + margin: 0; } /* === Grid (shared) === */ .tdf-grid { - display: grid; - gap: clamp(24px, 3vw, 30px); + display: grid; + gap: clamp(24px, 3vw, 30px); } .tdf-grid--3 { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { - .tdf-grid--3 { - grid-template-columns: repeat(2, 1fr); - } + .tdf-grid--3 { + grid-template-columns: repeat(2, 1fr); + } } @media (max-width: 560px) { - .tdf-grid--3 { - grid-template-columns: 1fr; - } + .tdf-grid--3 { + grid-template-columns: 1fr; + } } /* === Empty State === */ .tdf-empty { - text-align: center; - padding: clamp(50px, 7vw, 90px) 0; - color: var(--wp--preset--color--accent-4, #686868); + text-align: center; + padding: clamp(50px, 7vw, 90px) 0; + color: var(--wp--preset--color--accent-4, #686868); } /* === Single Post / Article === */ .tdf-single { - padding-bottom: clamp(30px, 5vw, 60px); + padding-bottom: clamp(30px, 5vw, 60px); } .tdf-single .tdf-breadcrumbs { - text-align: center; - padding-top: clamp(16px, 2vw, 24px); - margin-bottom: 0; + text-align: center; + padding-top: clamp(16px, 2vw, 24px); + margin-bottom: 0; } /* Header */ .tdf-single__header { - padding: clamp(16px, 2.5vw, 28px) 0 clamp(20px, 3vw, 32px); - text-align: center; + padding: clamp(16px, 2.5vw, 28px) 0 clamp(20px, 3vw, 32px); + text-align: center; } .tdf-single__meta-top { - display: flex; - align-items: center; - justify-content: center; - gap: 0.75rem; - flex-wrap: wrap; - margin-bottom: 1rem; - font-size: 0.8125rem; - color: var(--wp--preset--color--accent-4, #686868); + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + flex-wrap: wrap; + margin-bottom: 1rem; + font-size: 0.8125rem; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-single__type { - font-size: 0.6875rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.8px; - background: var(--wp--preset--color--accent-1, #FFEE58); - color: var(--wp--preset--color--contrast, #111); - padding: 0.2rem 0.55rem; - border-radius: 3px; + font-size: 0.6875rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.8px; + background: var(--wp--preset--color--accent-1, #ffee58); + color: var(--wp--preset--color--contrast, #111); + padding: 0.2rem 0.55rem; + border-radius: 3px; } .tdf-single__reading-time::before { - content: '\00B7'; - margin-right: 0.75rem; + content: "\00B7"; + margin-right: 0.75rem; } .tdf-single__title { - font-size: clamp(2rem, 5vw, 2.75rem); - font-weight: 400; - line-height: 1.12; - letter-spacing: -0.5px; - margin: 0 0 1rem; - max-width: 640px; - margin-left: auto; - margin-right: auto; + font-size: clamp(2rem, 5vw, 2.75rem); + font-weight: 400; + line-height: 1.12; + letter-spacing: -0.5px; + margin: 0 0 1rem; + max-width: 640px; + margin-left: auto; + margin-right: auto; } .tdf-single__excerpt { - font-size: 1.125rem; - color: var(--wp--preset--color--accent-4, #686868); - line-height: 1.55; - margin: 0; - font-weight: 300; - max-width: 540px; - margin-left: auto; - margin-right: auto; + font-size: 1.125rem; + color: var(--wp--preset--color--accent-4, #686868); + line-height: 1.55; + margin: 0; + font-weight: 300; + max-width: 540px; + margin-left: auto; + margin-right: auto; } /* Hero image — breaks out of narrow container */ .tdf-single__hero { - margin: 0 auto clamp(24px, 4vw, 36px); - max-width: 960px; - padding: 0 clamp(20px, 5vw, 50px); + margin: 0 auto clamp(24px, 4vw, 36px); + max-width: 960px; + padding: 0 clamp(20px, 5vw, 50px); } .tdf-single__hero-wrap { - border-radius: 0.75rem; - overflow: hidden; + border-radius: 0.75rem; + overflow: hidden; } .tdf-single__hero-wrap img { - width: 100%; - aspect-ratio: 2 / 1; - object-fit: cover; - display: block; + width: 100%; + aspect-ratio: 2 / 1; + object-fit: cover; + display: block; } /* Author bar */ .tdf-single__author { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 1rem 0; - margin-bottom: clamp(20px, 3vw, 32px); - border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); - border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent); + display: flex; + align-items: center; + gap: 0.75rem; + padding: 1rem 0; + margin-bottom: clamp(20px, 3vw, 32px); + border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); + border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent); } .tdf-single__author img { - border-radius: 50%; - flex-shrink: 0; + border-radius: 50%; + flex-shrink: 0; } .tdf-single__author-info { - display: flex; - flex-direction: column; - flex: 1; + display: flex; + flex-direction: column; + flex: 1; } .tdf-single__author-name { - font-size: 0.9375rem; - font-weight: 500; + font-size: 0.9375rem; + font-weight: 500; } .tdf-single__author-role { - font-size: 0.75rem; - color: var(--wp--preset--color--accent-4, #686868); + font-size: 0.75rem; + color: var(--wp--preset--color--accent-4, #686868); } /* Video embed */ .tdf-single__video { - margin: clamp(24px, 4vw, 40px) 0; - border-radius: 0.5rem; - overflow: hidden; + margin: clamp(24px, 4vw, 40px) 0; + border-radius: 0.5rem; + overflow: hidden; } .tdf-single__video iframe { - width: 100%; - aspect-ratio: 16 / 9; - border: none; - display: block; + width: 100%; + aspect-ratio: 16 / 9; + border: none; + display: block; } /* Content */ .tdf-single__content { - padding: clamp(24px, 4vw, 40px) 0; - font-size: clamp(1rem, 1.5vw, 1.0625rem); - line-height: 1.7; + padding: clamp(24px, 4vw, 40px) 0; + font-size: clamp(1rem, 1.5vw, 1.0625rem); + line-height: 1.7; } .tdf-single__content > *:first-child { - margin-top: 0; + margin-top: 0; } .tdf-single__content h2 { - font-size: 1.5rem; - font-weight: 400; - margin: 2.5rem 0 1rem; + font-size: 1.5rem; + font-weight: 400; + margin: 2.5rem 0 1rem; } .tdf-single__content h3 { - font-size: 1.25rem; - font-weight: 500; - margin: 2rem 0 0.75rem; + font-size: 1.25rem; + font-weight: 500; + margin: 2rem 0 0.75rem; } .tdf-single__content p { - margin: 0 0 1.25rem; + margin: 0 0 1.25rem; } .tdf-single__content blockquote { - border-left: 2px solid var(--wp--preset--color--contrast, #111); - margin: 2rem 0; - padding: 1rem 1.5rem; - font-size: 1.125rem; - font-weight: 300; + border-left: 2px solid var(--wp--preset--color--contrast, #111); + margin: 2rem 0; + padding: 1rem 1.5rem; + font-size: 1.125rem; + font-weight: 300; } .tdf-single__content img { - border-radius: 0.5rem; - margin: 2rem 0; + border-radius: 0.5rem; + margin: 2rem 0; } .tdf-single__content a { - color: var(--wp--preset--color--accent-3, #503AA8); - text-decoration: underline; - text-underline-offset: 2px; + color: var(--wp--preset--color--accent-3, #503aa8); + text-decoration: underline; + text-underline-offset: 2px; } .tdf-single__content a:hover { - text-decoration: none; + text-decoration: none; } .tdf-single__content pre, .tdf-single__content code { - font-family: 'Fira Code', monospace; - font-size: 0.875em; + font-family: "Fira Code", monospace; + font-size: 0.875em; } .tdf-single__content pre { - background: var(--wp--preset--color--accent-5, #FBFAF3); - padding: 1.25rem 1.5rem; - border-radius: 0.5rem; - overflow-x: auto; - margin: 1.5rem 0; + background: var(--wp--preset--color--accent-5, #fbfaf3); + padding: 1.25rem 1.5rem; + border-radius: 0.5rem; + overflow-x: auto; + margin: 1.5rem 0; } /* Source link */ /* Opinions list (on article singles) */ .tdf-single__opinions { - margin-bottom: 2rem; + margin-bottom: 2rem; } .tdf-single__opinions-label { - display: block; - font-size: 0.6875rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.8px; - color: var(--wp--preset--color--accent-4, #686868); - margin-bottom: 0.75rem; + display: block; + font-size: 0.6875rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.8px; + color: var(--wp--preset--color--accent-4, #686868); + margin-bottom: 0.75rem; } .tdf-single__opinions-list { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .tdf-single__opinions-item { - display: flex; - align-items: center; - gap: 1rem; - padding: 1rem 1.25rem; - border: 1px solid color-mix(in srgb, currentColor 6%, transparent); - border-radius: 0.5rem; - text-decoration: none; - color: inherit; - margin-bottom: 0.625rem; - transition: box-shadow 0.2s, transform 0.2s; + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem 1.25rem; + border: 1px solid color-mix(in srgb, currentColor 6%, transparent); + border-radius: 0.5rem; + text-decoration: none; + color: inherit; + margin-bottom: 0.625rem; + transition: + box-shadow 0.2s, + transform 0.2s; } .tdf-single__opinions-item:hover { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); - transform: translateY(-1px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); + transform: translateY(-1px); } .tdf-single__opinions-body { - flex: 1; - min-width: 0; + flex: 1; + min-width: 0; } .tdf-single__opinions-title { - font-size: 1rem; - font-weight: 600; - margin: 0 0 0.25rem; - line-height: 1.3; + font-size: 1rem; + font-weight: 600; + margin: 0 0 0.25rem; + line-height: 1.3; } .tdf-single__opinions-quote { - font-size: 0.875rem; - font-style: italic; - color: var(--wp--preset--color--accent-4, #686868); - margin: 0 0 0.35rem; - line-height: 1.5; + font-size: 0.875rem; + font-style: italic; + color: var(--wp--preset--color--accent-4, #686868); + margin: 0 0 0.35rem; + line-height: 1.5; } .tdf-single__opinions-meta { - display: flex; - align-items: center; - gap: 0.4rem; - font-size: 0.8125rem; - color: var(--wp--preset--color--accent-4, #686868); + display: flex; + align-items: center; + gap: 0.4rem; + font-size: 0.8125rem; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-single__opinions-arrow { - flex-shrink: 0; - font-size: 1rem; - opacity: 0; - transform: translateX(-4px); - transition: opacity 0.2s, transform 0.2s; + flex-shrink: 0; + font-size: 1rem; + opacity: 0; + transform: translateX(-4px); + transition: + opacity 0.2s, + transform 0.2s; } .tdf-single__opinions-item:hover .tdf-single__opinions-arrow { - opacity: 0.5; - transform: translateX(0); + opacity: 0.5; + transform: translateX(0); } /* Related Article (on opinion singles) */ .tdf-single__related { - margin-bottom: 2rem; + margin-bottom: 2rem; } .tdf-single__related-label { - display: block; - font-size: 0.6875rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.8px; - color: var(--wp--preset--color--accent-4, #686868); - margin-bottom: 0.75rem; + display: block; + font-size: 0.6875rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.8px; + color: var(--wp--preset--color--accent-4, #686868); + margin-bottom: 0.75rem; } .tdf-single__related-card { - display: flex; - gap: 1.25rem; - padding: 1.25rem; - background: var(--wp--preset--color--accent-5, #FBFAF3); - border-radius: 0.625rem; - text-decoration: none; - color: inherit; - border: 1px solid color-mix(in srgb, currentColor 6%, transparent); - transition: box-shadow 0.2s, transform 0.2s; + display: flex; + gap: 1.25rem; + padding: 1.25rem; + background: var(--wp--preset--color--accent-5, #fbfaf3); + border-radius: 0.625rem; + text-decoration: none; + color: inherit; + border: 1px solid color-mix(in srgb, currentColor 6%, transparent); + transition: + box-shadow 0.2s, + transform 0.2s; } .tdf-single__related-card:hover { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); - transform: translateY(-1px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); + transform: translateY(-1px); } .tdf-single__related-img { - flex-shrink: 0; - width: 120px; - border-radius: 0.375rem; - overflow: hidden; + flex-shrink: 0; + width: 120px; + border-radius: 0.375rem; + overflow: hidden; } .tdf-single__related-img img { - width: 100%; - height: 100%; - object-fit: cover; + width: 100%; + height: 100%; + object-fit: cover; } .tdf-single__related-body { - display: flex; - flex-direction: column; - gap: 0.35rem; - min-width: 0; + display: flex; + flex-direction: column; + gap: 0.35rem; + min-width: 0; } .tdf-single__related-title { - font-size: 1.0625rem; - font-weight: 600; - margin: 0; - line-height: 1.3; + font-size: 1.0625rem; + font-weight: 600; + margin: 0; + line-height: 1.3; } .tdf-single__related-excerpt { - font-size: 0.875rem; - color: var(--wp--preset--color--accent-4, #686868); - margin: 0; - line-height: 1.5; + font-size: 0.875rem; + color: var(--wp--preset--color--accent-4, #686868); + margin: 0; + line-height: 1.5; } .tdf-single__related-date { - font-size: 0.8125rem; - color: var(--wp--preset--color--accent-4, #686868); + font-size: 0.8125rem; + color: var(--wp--preset--color--accent-4, #686868); } @media (max-width: 480px) { - .tdf-single__related-card { - flex-direction: column; - } + .tdf-single__related-card { + flex-direction: column; + } - .tdf-single__related-img { - width: 100%; - aspect-ratio: 16 / 9; - } + .tdf-single__related-img { + width: 100%; + aspect-ratio: 16 / 9; + } } .tdf-single__source { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 1rem 1.25rem; - background: var(--wp--preset--color--accent-5, #FBFAF3); - border-radius: 0.5rem; - font-size: 0.875rem; - margin-bottom: 1.5rem; + display: flex; + align-items: center; + gap: 0.75rem; + padding: 1rem 1.25rem; + background: var(--wp--preset--color--accent-5, #fbfaf3); + border-radius: 0.5rem; + font-size: 0.875rem; + margin-bottom: 1.5rem; } .tdf-single__source-label { - font-size: 0.6875rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.8px; - color: var(--wp--preset--color--accent-4, #686868); + font-size: 0.6875rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.8px; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-single__source a { - color: var(--wp--preset--color--accent-3, #503AA8); - text-decoration: none; + color: var(--wp--preset--color--accent-3, #503aa8); + text-decoration: none; } .tdf-single__source a:hover { - text-decoration: underline; + text-decoration: underline; } /* Tags */ .tdf-single__tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - padding-bottom: 1.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + padding-bottom: 1.5rem; } .tdf-single__tag { - font-size: 0.8125rem; - font-weight: 400; - color: var(--wp--preset--color--accent-3, #503AA8); - text-decoration: none; - padding: 0.25rem 0.625rem; - border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-3, #503AA8) 20%, transparent); - border-radius: 100px; - transition: background 0.12s; + font-size: 0.8125rem; + font-weight: 400; + color: var(--wp--preset--color--accent-3, #503aa8); + text-decoration: none; + padding: 0.25rem 0.625rem; + border: 1px solid + color-mix( + in srgb, + var(--wp--preset--color--accent-3, #503aa8) 20%, + transparent + ); + border-radius: 100px; + transition: background 0.12s; } .tdf-single__tag:hover { - background: color-mix(in srgb, var(--wp--preset--color--accent-3, #503AA8) 8%, transparent); + background: color-mix( + in srgb, + var(--wp--preset--color--accent-3, #503aa8) 8%, + transparent + ); } /* Share buttons (in author bar) */ .tdf-single__share { - display: flex; - align-items: center; - gap: 0.375rem; - margin-left: auto; + display: flex; + align-items: center; + gap: 0.375rem; + margin-left: auto; } .tdf-single__share-btn { - display: flex; - align-items: center; - justify-content: center; - min-width: 32px; - height: 32px; - padding: 0 0.5rem; - border: 1px solid color-mix(in srgb, currentColor 10%, transparent); - border-radius: 100px; - background: transparent; - color: var(--wp--preset--color--contrast, #111); - cursor: pointer; - text-decoration: none; - transition: background 0.15s, border-color 0.15s; - font-size: 0.75rem; - font-family: inherit; - font-weight: 500; + display: flex; + align-items: center; + justify-content: center; + min-width: 32px; + height: 32px; + padding: 0 0.5rem; + border: 1px solid color-mix(in srgb, currentColor 10%, transparent); + border-radius: 100px; + background: transparent; + color: var(--wp--preset--color--contrast, #111); + cursor: pointer; + text-decoration: none; + transition: + background 0.15s, + border-color 0.15s; + font-size: 0.75rem; + font-family: inherit; + font-weight: 500; } .tdf-single__share-btn:hover { - background: var(--wp--preset--color--accent-5, #FBFAF3); - border-color: color-mix(in srgb, currentColor 20%, transparent); + background: var(--wp--preset--color--accent-5, #fbfaf3); + border-color: color-mix(in srgb, currentColor 20%, transparent); } /* Post navigation */ .tdf-single__nav { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - padding: clamp(24px, 4vw, 40px) 0 clamp(40px, 6vw, 70px); + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + padding: clamp(24px, 4vw, 40px) 0 clamp(40px, 6vw, 70px); } @media (max-width: 560px) { - .tdf-single__nav { - grid-template-columns: 1fr; - } + .tdf-single__nav { + grid-template-columns: 1fr; + } } .tdf-single__nav-link { - display: flex; - flex-direction: column; - gap: 0.375rem; - padding: 1rem 1.25rem; - border: 1px solid color-mix(in srgb, currentColor 8%, transparent); - border-radius: 0.5rem; - text-decoration: none; - transition: border-color 0.2s, box-shadow 0.2s; + display: flex; + flex-direction: column; + gap: 0.375rem; + padding: 1rem 1.25rem; + border: 1px solid color-mix(in srgb, currentColor 8%, transparent); + border-radius: 0.5rem; + text-decoration: none; + transition: + border-color 0.2s, + box-shadow 0.2s; } .tdf-single__nav-link:hover { - border-color: color-mix(in srgb, currentColor 20%, transparent); - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); + border-color: color-mix(in srgb, currentColor 20%, transparent); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .tdf-single__nav-link--next { - text-align: right; + text-align: right; } .tdf-single__nav-label { - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.8px; - color: var(--wp--preset--color--accent-4, #686868); + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.8px; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-single__nav-title { - font-size: 0.9375rem; - font-weight: 500; - line-height: 1.3; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + font-size: 0.9375rem; + font-weight: 500; + line-height: 1.3; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } /* === Page Template === */ .tdf-page { - padding: clamp(30px, 7vw, 70px) 0 clamp(50px, 7vw, 90px); + padding: clamp(30px, 7vw, 70px) 0 clamp(50px, 7vw, 90px); } .tdf-page__title { - font-size: clamp(2.15rem, 5vw, 3rem); - font-weight: 400; - line-height: 1.125; - letter-spacing: -0.5px; - margin: 0 0 clamp(30px, 5vw, 50px); + font-size: clamp(2.15rem, 5vw, 3rem); + font-weight: 400; + line-height: 1.125; + letter-spacing: -0.5px; + margin: 0 0 clamp(30px, 5vw, 50px); } .tdf-page__subtitle { - margin: 0.5rem 0 0; - font-size: 1rem; - color: var(--wp--preset--color--accent-4, #686868); + margin: 0.5rem 0 0; + font-size: 1rem; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-page__content > *:first-child { - margin-top: 0; + margin-top: 0; } /* === Breadcrumbs === */ .tdf-breadcrumbs { - margin-bottom: clamp(20px, 3vw, 30px); + margin-bottom: clamp(20px, 3vw, 30px); } .tdf-breadcrumbs p { - font-size: 0.875rem; - color: var(--wp--preset--color--accent-4, #686868); - margin: 0; + font-size: 0.875rem; + color: var(--wp--preset--color--accent-4, #686868); + margin: 0; } .tdf-breadcrumbs a { - text-decoration: none; + text-decoration: none; } .tdf-breadcrumbs a:hover { - text-decoration: underline; + text-decoration: underline; } /* === Footer === */ .tdf-footer { - border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); - margin-top: 0; + border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); + margin-top: 0; } .tdf-footer__inner { - max-width: 1340px; - margin: 0 auto; - padding: 2rem clamp(20px, 5vw, 50px); + max-width: 1340px; + margin: 0 auto; + padding: 2rem clamp(20px, 5vw, 50px); } .tdf-footer p { - margin: 0; - font-size: 0.875rem; - color: var(--wp--preset--color--accent-4, #686868); + margin: 0; + font-size: 0.875rem; + color: var(--wp--preset--color--accent-4, #686868); } /* === Registration / Generic Form === */ .tdf-form { - max-width: 420px; - margin: 0 auto; - display: flex; - flex-direction: column; - gap: 1.25rem; + max-width: 420px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 1.25rem; } .tdf-form + .tdf-form__alt-link { - text-align: center; + text-align: center; } .tdf-form__group { - display: flex; - flex-direction: column; - gap: 0.375rem; + display: flex; + flex-direction: column; + gap: 0.375rem; } .tdf-form__label { - font-size: 0.875rem; - font-weight: 600; + font-size: 0.875rem; + font-weight: 600; } .tdf-form__input { - padding: 0.7rem 0.875rem; - font-size: 0.9375rem; - font-family: inherit; - border: 1px solid color-mix(in srgb, currentColor 15%, transparent); - border-radius: 8px; - background: var(--wp--preset--color--base, #fff); - color: var(--wp--preset--color--contrast, #111); - transition: border-color 0.15s ease, box-shadow 0.15s ease; + padding: 0.7rem 0.875rem; + font-size: 0.9375rem; + font-family: inherit; + border: 1px solid color-mix(in srgb, currentColor 15%, transparent); + border-radius: 8px; + background: var(--wp--preset--color--base, #fff); + color: var(--wp--preset--color--contrast, #111); + transition: + border-color 0.15s ease, + box-shadow 0.15s ease; } .tdf-form__input:focus { - outline: none; - border-color: var(--wp--preset--color--accent-3, #503AA8); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-3, #503AA8) 12%, transparent); + outline: none; + border-color: var(--wp--preset--color--accent-3, #503aa8); + box-shadow: 0 0 0 3px + color-mix( + in srgb, + var(--wp--preset--color--accent-3, #503aa8) 12%, + transparent + ); } .tdf-form__input::placeholder { - color: var(--wp--preset--color--accent-4, #686868); + color: var(--wp--preset--color--accent-4, #686868); } .tdf-form__note { - margin: 0; - font-size: 0.8125rem; - color: var(--wp--preset--color--accent-4, #686868); + margin: 0; + font-size: 0.8125rem; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-form__error { - padding: 0.75rem 1rem; - background: #fef2f2; - color: #b91c1c; - border: 1px solid #fecaca; - border-radius: 8px; - font-size: 0.875rem; - margin-bottom: 0.5rem; + padding: 0.75rem 1rem; + background: #fef2f2; + color: #b91c1c; + border: 1px solid #fecaca; + border-radius: 8px; + font-size: 0.875rem; + margin-bottom: 0.5rem; } .tdf-form__alt-link { - margin-top: 1.5rem; - font-size: 0.875rem; - color: var(--wp--preset--color--accent-4, #686868); + margin-top: 1.5rem; + font-size: 0.875rem; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-form .tdf-btn { - width: 100%; - text-align: center; + width: 100%; + text-align: center; } /* === Reviews Section (Front Page + Archive) === */ .tdf-reviews { - padding: clamp(40px, 7vw, 80px) 0; + padding: clamp(40px, 7vw, 80px) 0; } .tdf-reviews__header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: clamp(20px, 3vw, 32px); - flex-wrap: wrap; - gap: 12px; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: clamp(20px, 3vw, 32px); + flex-wrap: wrap; + gap: 12px; } .tdf-reviews__header .tdf-section__heading { - margin-bottom: 0; + margin-bottom: 0; } .tdf-reviews__grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: clamp(16px, 2vw, 24px); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: clamp(16px, 2vw, 24px); } @media (max-width: 900px) { - .tdf-reviews__grid { - grid-template-columns: repeat(2, 1fr); - } + .tdf-reviews__grid { + grid-template-columns: repeat(2, 1fr); + } } @media (max-width: 560px) { - .tdf-reviews__grid { - grid-template-columns: 1fr; - } + .tdf-reviews__grid { + grid-template-columns: 1fr; + } } .tdf-reviews__card { - display: flex; - flex-direction: column; - background: #fff; - border-radius: 12px; - overflow: hidden; - text-decoration: none; - border: 1px solid color-mix(in srgb, currentColor 8%, transparent); - transition: box-shadow 0.2s ease, transform 0.2s ease; + display: flex; + flex-direction: column; + background: #fff; + border-radius: 12px; + overflow: hidden; + text-decoration: none; + border: 1px solid color-mix(in srgb, currentColor 8%, transparent); + transition: + box-shadow 0.2s ease, + transform 0.2s ease; } .tdf-reviews__card:hover { - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); - transform: translateY(-2px); + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); + transform: translateY(-2px); } .tdf-reviews__card-img { - aspect-ratio: 4 / 3; - overflow: hidden; - background: var(--wp--preset--color--accent-5, #FBFAF3); - display: flex; - align-items: center; - justify-content: center; + aspect-ratio: 4 / 3; + overflow: hidden; + background: var(--wp--preset--color--accent-5, #fbfaf3); + display: flex; + align-items: center; + justify-content: center; } .tdf-reviews__card-img img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.3s ease; + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; } .tdf-reviews__card:hover .tdf-reviews__card-img img { - transform: scale(1.03); + transform: scale(1.03); } .tdf-reviews__placeholder { - width: 100%; - height: 100%; - background: var(--wp--preset--color--accent-5, #FBFAF3); + width: 100%; + height: 100%; + background: var(--wp--preset--color--accent-5, #fbfaf3); } .tdf-reviews__card-body { - padding: 1.25rem 1.5rem 1.5rem; - display: flex; - flex-direction: column; - gap: 6px; - flex: 1; + padding: 1.25rem 1.5rem 1.5rem; + display: flex; + flex-direction: column; + gap: 6px; + flex: 1; } .tdf-reviews__product-name { - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--wp--preset--color--accent-3, #503AA8); + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--wp--preset--color--accent-3, #503aa8); } .tdf-reviews__card-title { - font-size: 1.125rem; - font-weight: 600; - line-height: 1.3; - margin: 0; + font-size: 1.125rem; + font-weight: 600; + line-height: 1.3; + margin: 0; } .tdf-reviews__card-excerpt { - margin: 0; - font-size: 0.9375rem; - color: var(--wp--preset--color--accent-4, #686868); - line-height: 1.5; + margin: 0; + font-size: 0.9375rem; + color: var(--wp--preset--color--accent-4, #686868); + line-height: 1.5; } .tdf-reviews__card-footer { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: auto; - padding-top: 8px; + display: flex; + align-items: center; + justify-content: space-between; + margin-top: auto; + padding-top: 8px; } .tdf-reviews__stars { - display: flex; - gap: 2px; + display: flex; + gap: 2px; } .tdf-reviews__star { - font-size: 1rem; - color: color-mix(in srgb, currentColor 20%, transparent); - line-height: 1; + font-size: 1rem; + color: color-mix(in srgb, currentColor 20%, transparent); + line-height: 1; } .tdf-reviews__star--filled { - color: #F59E0B; + color: #f59e0b; } .tdf-reviews__date { - font-size: 0.8125rem; - color: var(--wp--preset--color--accent-4, #686868); + font-size: 0.8125rem; + color: var(--wp--preset--color--accent-4, #686868); } /* === Review Product Card (Single Review) === */ .tdf-review-card { - display: flex; - gap: clamp(16px, 3vw, 24px); - padding: clamp(16px, 3vw, 24px); - background: var(--wp--preset--color--accent-5, #FBFAF3); - border-radius: 12px; - border: 1px solid color-mix(in srgb, currentColor 8%, transparent); - margin: 2rem 0; - align-items: center; + display: flex; + gap: clamp(16px, 3vw, 24px); + padding: clamp(16px, 3vw, 24px); + background: var(--wp--preset--color--accent-5, #fbfaf3); + border-radius: 12px; + border: 1px solid color-mix(in srgb, currentColor 8%, transparent); + margin: 2rem 0; + align-items: center; } @media (max-width: 560px) { - .tdf-review-card { - flex-direction: column; - text-align: center; - } + .tdf-review-card { + flex-direction: column; + text-align: center; + } } .tdf-review-card__img { - flex: 0 0 160px; - max-width: 160px; + flex: 0 0 160px; + max-width: 160px; } .tdf-review-card__img img { - width: 100%; - height: auto; - border-radius: 8px; - object-fit: cover; + width: 100%; + height: auto; + border-radius: 8px; + object-fit: cover; } @media (max-width: 560px) { - .tdf-review-card__img { - flex: none; - max-width: 200px; - } + .tdf-review-card__img { + flex: none; + max-width: 200px; + } } .tdf-review-card__body { - display: flex; - flex-direction: column; - gap: 8px; + display: flex; + flex-direction: column; + gap: 8px; } .tdf-review-card__product { - font-size: 1.25rem; - font-weight: 600; - margin: 0; + font-size: 1.25rem; + font-weight: 600; + margin: 0; } .tdf-review-card__rating { - display: flex; - align-items: center; - gap: 10px; + display: flex; + align-items: center; + gap: 10px; } @media (max-width: 560px) { - .tdf-review-card__rating { - justify-content: center; - } + .tdf-review-card__rating { + justify-content: center; + } } .tdf-review-card__stars { - display: flex; - gap: 3px; + display: flex; + gap: 3px; } .tdf-review-card__star { - font-size: 1.25rem; - color: color-mix(in srgb, currentColor 20%, transparent); - line-height: 1; + font-size: 1.25rem; + color: color-mix(in srgb, currentColor 20%, transparent); + line-height: 1; } .tdf-review-card__star--filled { - color: #F59E0B; + color: #f59e0b; } .tdf-review-card__score { - font-size: 0.9375rem; - font-weight: 600; - color: var(--wp--preset--color--accent-4, #686868); + font-size: 0.9375rem; + font-weight: 600; + color: var(--wp--preset--color--accent-4, #686868); } /* === Review Archive Styles === */ .tdf-archive--reviews .tdf-archive__empty { - text-align: center; - padding: 3rem 0; - color: var(--wp--preset--color--accent-4, #686868); - font-size: 1rem; + text-align: center; + padding: 3rem 0; + color: var(--wp--preset--color--accent-4, #686868); + font-size: 1rem; } .tdf-archive--reviews .tdf-reviews__grid { - margin-bottom: clamp(24px, 4vw, 40px); + margin-bottom: clamp(24px, 4vw, 40px); } /* === Review Search & Filter Controls === */ .tdf-review-filter { - margin-bottom: clamp(24px, 4vw, 36px); + margin-bottom: clamp(24px, 4vw, 36px); } .tdf-review-filter__form { - display: flex; - flex-direction: column; - gap: 12px; + display: flex; + flex-direction: column; + gap: 12px; } .tdf-review-filter__search { - display: flex; - gap: 8px; + display: flex; + gap: 8px; } .tdf-review-filter__input { - flex: 1; - padding: 0.55rem 0.875rem; - font-size: 0.9375rem; - font-family: inherit; - border: 1px solid color-mix(in srgb, currentColor 15%, transparent); - border-radius: 8px; - background: var(--wp--preset--color--base, #fff); - color: var(--wp--preset--color--contrast, #111); - transition: border-color 0.15s ease; + flex: 1; + padding: 0.55rem 0.875rem; + font-size: 0.9375rem; + font-family: inherit; + border: 1px solid color-mix(in srgb, currentColor 15%, transparent); + border-radius: 8px; + background: var(--wp--preset--color--base, #fff); + color: var(--wp--preset--color--contrast, #111); + transition: border-color 0.15s ease; } .tdf-review-filter__input:focus { - outline: none; - border-color: var(--wp--preset--color--accent-3, #503AA8); + outline: none; + border-color: var(--wp--preset--color--accent-3, #503aa8); } .tdf-review-filter__input::placeholder { - color: var(--wp--preset--color--accent-4, #686868); + color: var(--wp--preset--color--accent-4, #686868); } .tdf-review-filter__rating-bar { - display: flex; - align-items: center; - gap: 0.375rem; - flex-wrap: wrap; + display: flex; + align-items: center; + gap: 0.375rem; + flex-wrap: wrap; } .tdf-review-filter__label { - font-size: 0.8125rem; - font-weight: 600; - margin-right: 4px; - color: var(--wp--preset--color--accent-4, #686868); + font-size: 0.8125rem; + font-weight: 600; + margin-right: 4px; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-review-filter__pill { - display: inline-block; - padding: 0.35rem 0.75rem; - font-size: 0.8125rem; - font-weight: 500; - text-decoration: none; - border: 1px solid color-mix(in srgb, currentColor 12%, transparent); - border-radius: 20px; - transition: all 0.15s ease; + display: inline-block; + padding: 0.35rem 0.75rem; + font-size: 0.8125rem; + font-weight: 500; + text-decoration: none; + border: 1px solid color-mix(in srgb, currentColor 12%, transparent); + border-radius: 20px; + transition: all 0.15s ease; } .tdf-review-filter__pill:hover { - background: var(--wp--preset--color--accent-5, #FBFAF3); - border-color: color-mix(in srgb, currentColor 18%, transparent); + background: var(--wp--preset--color--accent-5, #fbfaf3); + border-color: color-mix(in srgb, currentColor 18%, transparent); } .tdf-review-filter__pill.is-active { - background: var(--wp--preset--color--contrast, #111); - color: var(--wp--preset--color--base, #fff); - border-color: var(--wp--preset--color--contrast, #111); + background: var(--wp--preset--color--contrast, #111); + color: var(--wp--preset--color--base, #fff); + border-color: var(--wp--preset--color--contrast, #111); } .tdf-review-filter__active { - display: flex; - align-items: center; - gap: 12px; - margin-top: 12px; - padding: 10px 14px; - background: var(--wp--preset--color--accent-5, #FBFAF3); - border-radius: 8px; - font-size: 0.875rem; + display: flex; + align-items: center; + gap: 12px; + margin-top: 12px; + padding: 10px 14px; + background: var(--wp--preset--color--accent-5, #fbfaf3); + border-radius: 8px; + font-size: 0.875rem; } .tdf-review-filter__results { - color: var(--wp--preset--color--accent-4, #686868); + color: var(--wp--preset--color--accent-4, #686868); } .tdf-review-filter__clear { - margin-left: auto; - font-size: 0.8125rem; - color: var(--wp--preset--color--accent-4, #686868); - text-decoration: none; - transition: color 0.15s ease; + margin-left: auto; + font-size: 0.8125rem; + color: var(--wp--preset--color--accent-4, #686868); + text-decoration: none; + transition: color 0.15s ease; } .tdf-review-filter__clear:hover { - color: var(--wp--preset--color--contrast, #111); - text-decoration: underline; + color: var(--wp--preset--color--contrast, #111); + text-decoration: underline; } @media (max-width: 560px) { - .tdf-review-filter__search { - flex-direction: column; - } + .tdf-review-filter__search { + flex-direction: column; + } - .tdf-review-filter__rating-bar { - gap: 6px; - } + .tdf-review-filter__rating-bar { + gap: 6px; + } } /* === Opinions Section Header (Front Page) === */ .tdf-opinions__header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: clamp(20px, 3vw, 32px); - flex-wrap: wrap; - gap: 12px; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: clamp(20px, 3vw, 32px); + flex-wrap: wrap; + gap: 12px; } .tdf-opinions__header .tdf-section__heading { - margin-bottom: 0; + margin-bottom: 0; } /* === Opinion Archive Styles === */ .tdf-archive--opinions .tdf-archive__empty { - text-align: center; - padding: 3rem 0; - color: var(--wp--preset--color--accent-4, #686868); - font-size: 1rem; + text-align: center; + padding: 3rem 0; + color: var(--wp--preset--color--accent-4, #686868); + font-size: 1rem; } .tdf-opinions-archive__grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: clamp(16px, 2vw, 24px); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: clamp(16px, 2vw, 24px); } @media (max-width: 900px) { - .tdf-opinions-archive__grid { - grid-template-columns: repeat(2, 1fr); - } + .tdf-opinions-archive__grid { + grid-template-columns: repeat(2, 1fr); + } } @media (max-width: 560px) { - .tdf-opinions-archive__grid { - grid-template-columns: 1fr; - } + .tdf-opinions-archive__grid { + grid-template-columns: 1fr; + } } /* === Opinion Search & Filter Controls === */ .tdf-opinion-filter { - margin-bottom: clamp(24px, 4vw, 36px); + margin-bottom: clamp(24px, 4vw, 36px); } .tdf-opinion-filter__form { - display: flex; - flex-direction: column; - gap: 12px; + display: flex; + flex-direction: column; + gap: 12px; } .tdf-opinion-filter__search { - display: flex; - gap: 8px; + display: flex; + gap: 8px; } .tdf-opinion-filter__input { - flex: 1; - padding: 0.55rem 0.875rem; - font-size: 0.9375rem; - font-family: inherit; - border: 1px solid color-mix(in srgb, currentColor 15%, transparent); - border-radius: 8px; - background: var(--wp--preset--color--base, #fff); - color: var(--wp--preset--color--contrast, #111); - transition: border-color 0.15s ease; + flex: 1; + padding: 0.55rem 0.875rem; + font-size: 0.9375rem; + font-family: inherit; + border: 1px solid color-mix(in srgb, currentColor 15%, transparent); + border-radius: 8px; + background: var(--wp--preset--color--base, #fff); + color: var(--wp--preset--color--contrast, #111); + transition: border-color 0.15s ease; } .tdf-opinion-filter__input:focus { - outline: none; - border-color: var(--wp--preset--color--accent-3, #503AA8); + outline: none; + border-color: var(--wp--preset--color--accent-3, #503aa8); } .tdf-opinion-filter__input::placeholder { - color: var(--wp--preset--color--accent-4, #686868); + color: var(--wp--preset--color--accent-4, #686868); } .tdf-opinion-filter__author-bar { - display: flex; - align-items: center; - gap: 0.375rem; - flex-wrap: wrap; + display: flex; + align-items: center; + gap: 0.375rem; + flex-wrap: wrap; } .tdf-opinion-filter__label { - font-size: 0.8125rem; - font-weight: 600; - margin-right: 4px; - color: var(--wp--preset--color--accent-4, #686868); + font-size: 0.8125rem; + font-weight: 600; + margin-right: 4px; + color: var(--wp--preset--color--accent-4, #686868); } .tdf-opinion-filter__pill { - display: inline-block; - padding: 0.35rem 0.75rem; - font-size: 0.8125rem; - font-weight: 500; - text-decoration: none; - border: 1px solid color-mix(in srgb, currentColor 12%, transparent); - border-radius: 20px; - transition: all 0.15s ease; + display: inline-block; + padding: 0.35rem 0.75rem; + font-size: 0.8125rem; + font-weight: 500; + text-decoration: none; + border: 1px solid color-mix(in srgb, currentColor 12%, transparent); + border-radius: 20px; + transition: all 0.15s ease; } .tdf-opinion-filter__pill:hover { - background: var(--wp--preset--color--accent-5, #FBFAF3); - border-color: color-mix(in srgb, currentColor 18%, transparent); + background: var(--wp--preset--color--accent-5, #fbfaf3); + border-color: color-mix(in srgb, currentColor 18%, transparent); } .tdf-opinion-filter__pill.is-active { - background: var(--wp--preset--color--contrast, #111); - color: var(--wp--preset--color--base, #fff); - border-color: var(--wp--preset--color--contrast, #111); + background: var(--wp--preset--color--contrast, #111); + color: var(--wp--preset--color--base, #fff); + border-color: var(--wp--preset--color--contrast, #111); } .tdf-opinion-filter__active { - display: flex; - align-items: center; - gap: 12px; - margin-top: 12px; - padding: 10px 14px; - background: var(--wp--preset--color--accent-5, #FBFAF3); - border-radius: 8px; - font-size: 0.875rem; + display: flex; + align-items: center; + gap: 12px; + margin-top: 12px; + padding: 10px 14px; + background: var(--wp--preset--color--accent-5, #fbfaf3); + border-radius: 8px; + font-size: 0.875rem; } .tdf-opinion-filter__results { - color: var(--wp--preset--color--accent-4, #686868); + color: var(--wp--preset--color--accent-4, #686868); } .tdf-opinion-filter__clear { - margin-left: auto; - font-size: 0.8125rem; - color: var(--wp--preset--color--accent-4, #686868); - text-decoration: none; - transition: color 0.15s ease; + margin-left: auto; + font-size: 0.8125rem; + color: var(--wp--preset--color--accent-4, #686868); + text-decoration: none; + transition: color 0.15s ease; } .tdf-opinion-filter__clear:hover { - color: var(--wp--preset--color--contrast, #111); - text-decoration: underline; + color: var(--wp--preset--color--contrast, #111); + text-decoration: underline; } @media (max-width: 560px) { - .tdf-opinion-filter__search { - flex-direction: column; - } + .tdf-opinion-filter__search { + flex-direction: column; + } - .tdf-opinion-filter__author-bar { - gap: 6px; - } + .tdf-opinion-filter__author-bar { + gap: 6px; + } } /* === Trending in Tech Page === */ .tdf-hero-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: clamp(12px, 2vw, 16px); - margin-bottom: clamp(30px, 5vw, 50px); + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(12px, 2vw, 16px); + margin-bottom: clamp(30px, 5vw, 50px); } .tdf-hero-grid__item { - position: relative; - overflow: hidden; - border-radius: 12px; - display: block; - text-decoration: none; - min-height: 240px; + position: relative; + overflow: hidden; + border-radius: 12px; + display: block; + text-decoration: none; + min-height: 240px; } .tdf-hero-grid__item:first-child { - grid-column: 1 / -1; - min-height: 340px; + grid-column: 1 / -1; + min-height: 340px; } .tdf-hero-grid__img { - position: absolute; - inset: 0; + position: absolute; + inset: 0; } .tdf-hero-grid__img img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.3s ease; + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; } .tdf-hero-grid__item:hover .tdf-hero-grid__img img { - transform: scale(1.03); + transform: scale(1.03); } .tdf-hero-grid__overlay { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: clamp(16px, 3vw, 24px); - color: #fff; - background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 70%, transparent 100%); + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: clamp(16px, 3vw, 24px); + color: #fff; + background: linear-gradient( + to top, + rgba(0, 0, 0, 0.75) 0%, + rgba(0, 0, 0, 0.15) 70%, + transparent 100% + ); } .tdf-hero-grid__title { - font-size: clamp(1rem, 2vw, 1.375rem); - font-weight: 600; - line-height: 1.3; - margin: 0.5rem 0 0.375rem; + font-size: clamp(1rem, 2vw, 1.375rem); + font-weight: 600; + line-height: 1.3; + margin: 0.5rem 0 0.375rem; } .tdf-hero-grid__item:first-child .tdf-hero-grid__title { - font-size: clamp(1.25rem, 3vw, 1.75rem); + font-size: clamp(1.25rem, 3vw, 1.75rem); } .tdf-hero-grid__meta { - font-size: 0.8125rem; - opacity: 0.8; - display: flex; - gap: 0.375rem; + font-size: 0.8125rem; + opacity: 0.8; + display: flex; + gap: 0.375rem; } @media (max-width: 600px) { - .tdf-hero-grid { - grid-template-columns: 1fr; - } + .tdf-hero-grid { + grid-template-columns: 1fr; + } - .tdf-hero-grid__item:first-child { - min-height: 260px; - } + .tdf-hero-grid__item:first-child { + min-height: 260px; + } } /* Trending card list (posts 5–9) */ .tdf-trending__list { - display: flex; - flex-direction: column; - gap: clamp(12px, 2vw, 16px); - margin-bottom: clamp(30px, 5vw, 50px); + display: flex; + flex-direction: column; + gap: clamp(12px, 2vw, 16px); + margin-bottom: clamp(30px, 5vw, 50px); } .tdf-trending__card { - display: flex; - gap: clamp(12px, 2vw, 20px); - text-decoration: none; - padding: clamp(12px, 2vw, 16px); - border: 1px solid color-mix(in srgb, currentColor 8%, transparent); - border-radius: 12px; - transition: box-shadow 0.2s ease, transform 0.2s ease; + display: flex; + gap: clamp(12px, 2vw, 20px); + text-decoration: none; + padding: clamp(12px, 2vw, 16px); + border: 1px solid color-mix(in srgb, currentColor 8%, transparent); + border-radius: 12px; + transition: + box-shadow 0.2s ease, + transform 0.2s ease; } .tdf-trending__card:hover { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); - transform: translateY(-1px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); + transform: translateY(-1px); } .tdf-trending__card-img { - flex: 0 0 160px; - border-radius: 8px; - overflow: hidden; + flex: 0 0 160px; + border-radius: 8px; + overflow: hidden; } .tdf-trending__card-img img { - width: 100%; - height: 100%; - object-fit: cover; - aspect-ratio: 3 / 2; + width: 100%; + height: 100%; + object-fit: cover; + aspect-ratio: 3 / 2; } .tdf-trending__card-body { - display: flex; - flex-direction: column; - gap: 4px; - flex: 1; - min-width: 0; + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; + min-width: 0; } .tdf-trending__card-type { - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--wp--preset--color--accent-3, #503AA8); + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--wp--preset--color--accent-3, #503aa8); } .tdf-trending__card-title { - font-size: 1.0625rem; - font-weight: 600; - line-height: 1.3; - margin: 0; + font-size: 1.0625rem; + font-weight: 600; + line-height: 1.3; + margin: 0; } .tdf-trending__card-excerpt { - margin: 0; - font-size: 0.9375rem; - color: var(--wp--preset--color--accent-4, #686868); - line-height: 1.5; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + margin: 0; + font-size: 0.9375rem; + color: var(--wp--preset--color--accent-4, #686868); + line-height: 1.5; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } .tdf-trending__card-meta { - display: flex; - gap: 0.375rem; - font-size: 0.8125rem; - color: var(--wp--preset--color--accent-4, #686868); - margin-top: auto; + display: flex; + gap: 0.375rem; + font-size: 0.8125rem; + color: var(--wp--preset--color--accent-4, #686868); + margin-top: auto; } @media (max-width: 560px) { - .tdf-trending__card { - flex-direction: column; - } - - .tdf-trending__card-img { - flex: none; - width: 100%; - } + .tdf-trending__card { + flex-direction: column; + } + + .tdf-trending__card-img { + flex: none; + width: 100%; + } }